Skip to content

Update theme package #1076

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 21, 2022
Merged

Update theme package #1076

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
72a5c5c
Use new theme component, fixes
microbit-robert Nov 18, 2022
d71414d
Bump theme version
microbit-robert Nov 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .circleci/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ _steps:
install_dependencies: &install_dependencies
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
install_theme: &install_theme
run: npm config set @microbit-foundation:registry https://npm.pkg.github.com/microbit-foundation && npm install --no-save @microbit-foundation/[email protected].192
run: npm config set @microbit-foundation:registry https://npm.pkg.github.com/microbit-foundation && npm install --no-save @microbit-foundation/[email protected].195
update_version: &update_version
run: npm run ci:update-version
build: &build
Expand Down
16 changes: 16 additions & 0 deletions src/deployment/default/components/container.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/**
* (c) 2022, Micro:bit Educational Foundation and contributors
*
* SPDX-License-Identifier: MIT
*/
const Container = {
variants: {
"sidebar-header": {
bg: "black",
p: 0,
maxW: "unset",
},
},
};

export default Container;
14 changes: 8 additions & 6 deletions src/deployment/default/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,17 @@
*/
import { extendTheme, withDefaultVariant } from "@chakra-ui/react";

import fonts from "./fonts";
import fontSizes from "./font-sizes";
import radii from "./radii";
import colors from "./colors";
import sizes from "./sizes";
import space from "./space";
import Alert from "./components/alert";
import Button from "./components/button";
import Container from "./components/container";
import Tabs from "./components/tabs";
import Alert from "./components/alert";
import Text from "./components/text";
import fontSizes from "./font-sizes";
import fonts from "./fonts";
import radii from "./radii";
import sizes from "./sizes";
import space from "./space";

// See https://chakra-ui.com/docs/theming/customize-theme
const overrides = {
Expand All @@ -27,6 +28,7 @@ const overrides = {
components: {
Alert,
Button,
Container,
Tabs,
Text,
},
Expand Down
4 changes: 2 additions & 2 deletions src/simulator/icons/compass-heading.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/simulator/icons/compass.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
229 changes: 118 additions & 111 deletions src/workbench/SideBarHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import {
Box,
Button,
Container,
Fade,
Flex,
HStack,
Expand Down Expand Up @@ -178,124 +179,130 @@ const SideBarHeader = ({
</ModalOverlay>
</Modal>
)}
<Flex
ref={ref}
backgroundColor="brand.500"
boxShadow="0px 4px 16px #00000033"
zIndex={zIndexSidebarHeader}
height={
searchAvailable && searchModal.isOpen ? "4.95rem" : topBarHeight
}
alignItems="center"
justifyContent="space-between"
pr={4}
transition="height .2s"
position="relative"
>
<Link
display="block"
href="https://microbit.org/code/"
target="_blank"
rel="noopener noreferrer"
aria-label={intl.formatMessage({ id: "visit-dot-org" })}
mx="1rem"
<Container variant="sidebar-header">
<Flex
ref={ref}
boxShadow="0px 4px 16px #00000033"
zIndex={zIndexSidebarHeader}
height={
searchAvailable && searchModal.isOpen ? "4.95rem" : topBarHeight
}
alignItems="center"
justifyContent="space-between"
pr={4}
transition="height .2s"
position="relative"
>
<HStack spacing="0.875rem">
<Box width="3.56875rem" color="white" role="img" ref={faceLogoRef}>
{brand.squareLogo}
</Box>
{!query && sidebarShown && (
<Box width="9.098rem" role="img" color="white">
{brand.horizontalLogo}
</Box>
)}
</HStack>
</Link>
{searchAvailable && !query && sidebarShown && (
<CollapsibleButton
onClick={handleModalOpened}
backgroundColor="#5c40a6"
fontWeight="normal"
color="#fffc"
icon={<Box as={RiSearch2Line} fontSize="lg" color="fff" />}
fontSize="sm"
_hover={{}}
_active={{}}
border="unset"
textAlign="left"
p={3}
pr={`min(${contentWidth / 50}%, var(--chakra-space-20))`}
_collapsed={{
pr: 3,
}}
text={intl.formatMessage({ id: "search" })}
mode={searchButtonMode}
mr="2rem"
/>
)}
{searchAvailable && query && sidebarShown && (
<Flex
backgroundColor="white"
borderRadius="3xl"
width={`calc(100% - ${modalOffset}px - 28px)`}
marginRight="28px"
position="relative"
<Link
display="block"
href="https://microbit.org/code/"
target="_blank"
rel="noopener noreferrer"
aria-label={intl.formatMessage({ id: "visit-dot-org" })}
mx="1rem"
>
<Button
_active={{}}
<HStack spacing="0.875rem">
<Box
width="3.56875rem"
color="white"
role="img"
ref={faceLogoRef}
>
{brand.squareLogo}
</Box>
{!query && sidebarShown && (
<Box width="9.098rem" role="img" color="white">
{brand.horizontalLogo}
</Box>
)}
</HStack>
</Link>
{searchAvailable && !query && sidebarShown && (
<CollapsibleButton
onClick={handleModalOpened}
backgroundColor="brand.700"
fontWeight="normal"
color="#fffc"
icon={<Box as={RiSearch2Line} fontSize="lg" color="fff" />}
fontSize="sm"
_hover={{}}
_active={{}}
border="unset"
color="gray.800"
flex={1}
fontSize="md"
fontWeight="normal"
justifyContent="flex-start"
leftIcon={
<Box as={RiSearch2Line} fontSize="lg" color="#838383" />
}
onClick={handleModalOpened}
overflow="hidden"
>
{query}
</Button>
<IconButton
aria-label={intl.formatMessage({ id: "clear" })}
backgroundColor="white"
// Also used for Zoom, move to theme.
color="#838383"
fontSize="2xl"
icon={<RiCloseLine />}
isRound={false}
onClick={handleClear}
position="absolute"
right="0"
pr={3}
pl={3}
variant="ghost"
textAlign="left"
p={3}
pr={`min(${contentWidth / 50}%, var(--chakra-space-20))`}
_collapsed={{
pr: 3,
}}
text={intl.formatMessage({ id: "search" })}
mode={searchButtonMode}
mr="2rem"
/>
)}
{searchAvailable && query && sidebarShown && (
<Flex
backgroundColor="white"
borderRadius="3xl"
width={`calc(100% - ${modalOffset}px - 28px)`}
marginRight="28px"
position="relative"
>
<Button
_active={{}}
_hover={{}}
border="unset"
color="gray.800"
flex={1}
fontSize="md"
fontWeight="normal"
justifyContent="flex-start"
leftIcon={
<Box as={RiSearch2Line} fontSize="lg" color="#838383" />
}
onClick={handleModalOpened}
overflow="hidden"
>
{query}
</Button>
<IconButton
aria-label={intl.formatMessage({ id: "clear" })}
backgroundColor="white"
// Also used for Zoom, move to theme.
color="#838383"
fontSize="2xl"
icon={<RiCloseLine />}
isRound={false}
onClick={handleClear}
position="absolute"
right="0"
pr={3}
pl={3}
variant="ghost"
/>
</Flex>
)}
<Flex
height="100%"
alignItems="center"
position="absolute"
width="28px"
right={sidebarShown ? "-8px" : "-28px"}
>
<Fade in={collapseBtn.isOpen} initial={{ opacity: 1 }}>
<HideSplitViewButton
aria-label={
sidebarShown
? intl.formatMessage({ id: "sidebar-collapse" })
: intl.formatMessage({ id: "sidebar-expand" })
}
onClick={handleCollapseBtnClick}
splitViewShown={sidebarShown}
direction="expandRight"
/>
</Fade>
</Flex>
)}
<Flex
height="100%"
alignItems="center"
position="absolute"
width="28px"
right={sidebarShown ? "-8px" : "-28px"}
>
<Fade in={collapseBtn.isOpen} initial={{ opacity: 1 }}>
<HideSplitViewButton
aria-label={
sidebarShown
? intl.formatMessage({ id: "sidebar-collapse" })
: intl.formatMessage({ id: "sidebar-expand" })
}
onClick={handleCollapseBtnClick}
splitViewShown={sidebarShown}
direction="expandRight"
/>
</Fade>
</Flex>
</Flex>
</Container>
</>
);
};
Expand Down