From a5baa23c77c6384b931733fc377b612232b0b58e Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 29 May 2022 02:00:11 +0800 Subject: [PATCH] feat: add primer base styles --- src/components/MetaBar.tsx | 4 +++- src/containers/Theme.tsx | 15 +++++++++------ src/styles/index.scss | 18 +----------------- 3 files changed, 13 insertions(+), 24 deletions(-) diff --git a/src/components/MetaBar.tsx b/src/components/MetaBar.tsx index 3f8449d..0500067 100644 --- a/src/components/MetaBar.tsx +++ b/src/components/MetaBar.tsx @@ -33,8 +33,10 @@ export function MetaBar({ metaData }: Props) { {branchName || '...'} diff --git a/src/containers/Theme.tsx b/src/containers/Theme.tsx index c6fa123..3ba2551 100644 --- a/src/containers/Theme.tsx +++ b/src/containers/Theme.tsx @@ -1,11 +1,7 @@ -import { ThemeProvider } from '@primer/react' +import { BaseStyles, ThemeProvider } from '@primer/react' import theme from '@primer/react/lib-esm/theme' import * as React from 'react' -// = { dark: 'night', light: 'day', @@ -27,6 +23,9 @@ const validColorSchemes = Object.keys(theme.colorSchemes) as EnumString< // BUT: Do not remove the validation, there might be other themes in future const getPreferenceFromDOM = () => { + // ) { const themePreference = useThemePreference() - return + return ( + + {children} + + ) } diff --git a/src/styles/index.scss b/src/styles/index.scss index b2c3619..5448e2f 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -369,15 +369,6 @@ $minimal-z-index: max( @include hide-for-print(); @include enableThemes; - @import '~@primer/css/base/index.scss'; - button { - border-radius: 6px; - font-weight: 600; - } - a { - color: var(--color-accent-fg); - } - $resizeHandlerWidth: 1px; .#{$name}-side-bar-body-wrapper { position: fixed; @@ -483,14 +474,6 @@ $minimal-z-index: max( } } - .branch-name { - margin-left: 4px; - padding: 4px 6px; // did not align well for some reason :/ - color: var(--color-fg-muted); - background-color: var(--color-accent-subtle); - word-break: break-word; - } - .close-side-bar-button-position { float: right; z-index: 1; // prevent being covered by following elements @@ -657,6 +640,7 @@ $minimal-z-index: max( cursor: pointer; white-space: nowrap; transition: padding 0.3s ease; // on toggle expansion in search results + color: var(--color-accent-fg); border-bottom: 1px solid var(--color-border-muted); &.compact {