Skip to content

Commit 0a0ba89

Browse files
microbit-robertmicrobit-robert
authored
Fix the styling of the search area in the default theme (#1076)
1 parent c81afac commit 0a0ba89

File tree

6 files changed

+146
-121
lines changed

6 files changed

+146
-121
lines changed

‎.circleci/config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ _steps:
4343
install_dependencies: &install_dependencies
4444
run: npm ci --cache .npm-cache && sudo npm config set @microbit-foundation:registry https://npm.pkg.github.com/microbit-foundation && sudo npm i -g @microbit-foundation/[email protected] @microbit-foundation/[email protected] @microbit-foundation/circleci-npm-package-versioner@1
4545
install_theme: &install_theme
46-
run: npm config set @microbit-foundation:registry https://npm.pkg.github.com/microbit-foundation && npm install --no-save @microbit-foundation/[email protected].192
46+
run: npm config set @microbit-foundation:registry https://npm.pkg.github.com/microbit-foundation && npm install --no-save @microbit-foundation/[email protected].195
4747
update_version: &update_version
4848
run: npm run ci:update-version
4949
build: &build

‎src/deployment/default/components/container.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/**
2+
* (c) 2022, Micro:bit Educational Foundation and contributors
3+
*
4+
* SPDX-License-Identifier: MIT
5+
*/
6+
const Container = {
7+
variants: {
8+
"sidebar-header": {
9+
bg: "black",
10+
p: 0,
11+
maxW: "unset",
12+
},
13+
},
14+
};
15+
16+
export default Container;

‎src/deployment/default/theme.ts‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,17 @@
55
*/
66
import { extendTheme, withDefaultVariant } from "@chakra-ui/react";
77

8-
import fonts from "./fonts";
9-
import fontSizes from "./font-sizes";
10-
import radii from "./radii";
118
import colors from "./colors";
12-
import sizes from "./sizes";
13-
import space from "./space";
9+
import Alert from "./components/alert";
1410
import Button from "./components/button";
11+
import Container from "./components/container";
1512
import Tabs from "./components/tabs";
16-
import Alert from "./components/alert";
1713
import Text from "./components/text";
14+
import fontSizes from "./font-sizes";
15+
import fonts from "./fonts";
16+
import radii from "./radii";
17+
import sizes from "./sizes";
18+
import space from "./space";
1819

1920
// See https://chakra-ui.com/docs/theming/customize-theme
2021
const overrides = {
@@ -27,6 +28,7 @@ const overrides = {
2728
components: {
2829
Alert,
2930
Button,
31+
Container,
3032
Tabs,
3133
Text,
3234
},

‎src/simulator/icons/compass-heading.svg‎

Lines changed: 2 additions & 2 deletions
Loading

‎src/simulator/icons/compass.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎src/workbench/SideBarHeader.tsx‎

Lines changed: 118 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
import {
77
Box,
88
Button,
9+
Container,
910
Fade,
1011
Flex,
1112
HStack,
@@ -178,124 +179,130 @@ const SideBarHeader = ({
178179
</ModalOverlay>
179180
</Modal>
180181
)}
181-
<Flex
182-
ref={ref}
183-
backgroundColor="brand.500"
184-
boxShadow="0px 4px 16px #00000033"
185-
zIndex={zIndexSidebarHeader}
186-
height={
187-
searchAvailable && searchModal.isOpen ? "4.95rem" : topBarHeight
188-
}
189-
alignItems="center"
190-
justifyContent="space-between"
191-
pr={4}
192-
transition="height .2s"
193-
position="relative"
194-
>
195-
<Link
196-
display="block"
197-
href="https://microbit.org/code/"
198-
target="_blank"
199-
rel="noopener noreferrer"
200-
aria-label={intl.formatMessage({ id: "visit-dot-org" })}
201-
mx="1rem"
182+
<Container variant="sidebar-header">
183+
<Flex
184+
ref={ref}
185+
boxShadow="0px 4px 16px #00000033"
186+
zIndex={zIndexSidebarHeader}
187+
height={
188+
searchAvailable && searchModal.isOpen ? "4.95rem" : topBarHeight
189+
}
190+
alignItems="center"
191+
justifyContent="space-between"
192+
pr={4}
193+
transition="height .2s"
194+
position="relative"
202195
>
203-
<HStack spacing="0.875rem">
204-
<Box width="3.56875rem" color="white" role="img" ref={faceLogoRef}>
205-
{brand.squareLogo}
206-
</Box>
207-
{!query && sidebarShown && (
208-
<Box width="9.098rem" role="img" color="white">
209-
{brand.horizontalLogo}
210-
</Box>
211-
)}
212-
</HStack>
213-
</Link>
214-
{searchAvailable && !query && sidebarShown && (
215-
<CollapsibleButton
216-
onClick={handleModalOpened}
217-
backgroundColor="#5c40a6"
218-
fontWeight="normal"
219-
color="#fffc"
220-
icon={<Box as={RiSearch2Line} fontSize="lg" color="fff" />}
221-
fontSize="sm"
222-
_hover={{}}
223-
_active={{}}
224-
border="unset"
225-
textAlign="left"
226-
p={3}
227-
pr={`min(${contentWidth / 50}%, var(--chakra-space-20))`}
228-
_collapsed={{
229-
pr: 3,
230-
}}
231-
text={intl.formatMessage({ id: "search" })}
232-
mode={searchButtonMode}
233-
mr="2rem"
234-
/>
235-
)}
236-
{searchAvailable && query && sidebarShown && (
237-
<Flex
238-
backgroundColor="white"
239-
borderRadius="3xl"
240-
width={`calc(100% - ${modalOffset}px - 28px)`}
241-
marginRight="28px"
242-
position="relative"
196+
<Link
197+
display="block"
198+
href="https://microbit.org/code/"
199+
target="_blank"
200+
rel="noopener noreferrer"
201+
aria-label={intl.formatMessage({ id: "visit-dot-org" })}
202+
mx="1rem"
243203
>
244-
<Button
245-
_active={{}}
204+
<HStack spacing="0.875rem">
205+
<Box
206+
width="3.56875rem"
207+
color="white"
208+
role="img"
209+
ref={faceLogoRef}
210+
>
211+
{brand.squareLogo}
212+
</Box>
213+
{!query && sidebarShown && (
214+
<Box width="9.098rem" role="img" color="white">
215+
{brand.horizontalLogo}
216+
</Box>
217+
)}
218+
</HStack>
219+
</Link>
220+
{searchAvailable && !query && sidebarShown && (
221+
<CollapsibleButton
222+
onClick={handleModalOpened}
223+
backgroundColor="brand.700"
224+
fontWeight="normal"
225+
color="#fffc"
226+
icon={<Box as={RiSearch2Line} fontSize="lg" color="fff" />}
227+
fontSize="sm"
246228
_hover={{}}
229+
_active={{}}
247230
border="unset"
248-
color="gray.800"
249-
flex={1}
250-
fontSize="md"
251-
fontWeight="normal"
252-
justifyContent="flex-start"
253-
leftIcon={
254-
<Box as={RiSearch2Line} fontSize="lg" color="#838383" />
255-
}
256-
onClick={handleModalOpened}
257-
overflow="hidden"
258-
>
259-
{query}
260-
</Button>
261-
<IconButton
262-
aria-label={intl.formatMessage({ id: "clear" })}
263-
backgroundColor="white"
264-
// Also used for Zoom, move to theme.
265-
color="#838383"
266-
fontSize="2xl"
267-
icon={<RiCloseLine />}
268-
isRound={false}
269-
onClick={handleClear}
270-
position="absolute"
271-
right="0"
272-
pr={3}
273-
pl={3}
274-
variant="ghost"
231+
textAlign="left"
232+
p={3}
233+
pr={`min(${contentWidth / 50}%, var(--chakra-space-20))`}
234+
_collapsed={{
235+
pr: 3,
236+
}}
237+
text={intl.formatMessage({ id: "search" })}
238+
mode={searchButtonMode}
239+
mr="2rem"
275240
/>
241+
)}
242+
{searchAvailable && query && sidebarShown && (
243+
<Flex
244+
backgroundColor="white"
245+
borderRadius="3xl"
246+
width={`calc(100% - ${modalOffset}px - 28px)`}
247+
marginRight="28px"
248+
position="relative"
249+
>
250+
<Button
251+
_active={{}}
252+
_hover={{}}
253+
border="unset"
254+
color="gray.800"
255+
flex={1}
256+
fontSize="md"
257+
fontWeight="normal"
258+
justifyContent="flex-start"
259+
leftIcon={
260+
<Box as={RiSearch2Line} fontSize="lg" color="#838383" />
261+
}
262+
onClick={handleModalOpened}
263+
overflow="hidden"
264+
>
265+
{query}
266+
</Button>
267+
<IconButton
268+
aria-label={intl.formatMessage({ id: "clear" })}
269+
backgroundColor="white"
270+
// Also used for Zoom, move to theme.
271+
color="#838383"
272+
fontSize="2xl"
273+
icon={<RiCloseLine />}
274+
isRound={false}
275+
onClick={handleClear}
276+
position="absolute"
277+
right="0"
278+
pr={3}
279+
pl={3}
280+
variant="ghost"
281+
/>
282+
</Flex>
283+
)}
284+
<Flex
285+
height="100%"
286+
alignItems="center"
287+
position="absolute"
288+
width="28px"
289+
right={sidebarShown ? "-8px" : "-28px"}
290+
>
291+
<Fade in={collapseBtn.isOpen} initial={{ opacity: 1 }}>
292+
<HideSplitViewButton
293+
aria-label={
294+
sidebarShown
295+
? intl.formatMessage({ id: "sidebar-collapse" })
296+
: intl.formatMessage({ id: "sidebar-expand" })
297+
}
298+
onClick={handleCollapseBtnClick}
299+
splitViewShown={sidebarShown}
300+
direction="expandRight"
301+
/>
302+
</Fade>
276303
</Flex>
277-
)}
278-
<Flex
279-
height="100%"
280-
alignItems="center"
281-
position="absolute"
282-
width="28px"
283-
right={sidebarShown ? "-8px" : "-28px"}
284-
>
285-
<Fade in={collapseBtn.isOpen} initial={{ opacity: 1 }}>
286-
<HideSplitViewButton
287-
aria-label={
288-
sidebarShown
289-
? intl.formatMessage({ id: "sidebar-collapse" })
290-
: intl.formatMessage({ id: "sidebar-expand" })
291-
}
292-
onClick={handleCollapseBtnClick}
293-
splitViewShown={sidebarShown}
294-
direction="expandRight"
295-
/>
296-
</Fade>
297304
</Flex>
298-
</Flex>
305+
</Container>
299306
</>
300307
);
301308
};

0 commit comments

Comments
 (0)