From f1a26e4dc4e726ead8461533cebfe20ce31b59c6 Mon Sep 17 00:00:00 2001 From: enes Date: Tue, 30 Jul 2024 12:23:38 +0200 Subject: [PATCH] chore: styling cleanup --- src/App.scss | 70 +++++++++++++++++++ src/App.tsx | 1 + src/components/Footer/style.module.scss | 11 --- .../Landing/CardComponent/style.module.scss | 15 ++-- src/index.css | 19 +---- src/layouts/style.module.scss | 58 --------------- src/pages/nostr/index.tsx | 4 +- src/pages/nostr/styles.module.scss | 1 + src/styles/{form.module.scss => form.scss} | 0 9 files changed, 81 insertions(+), 98 deletions(-) create mode 100644 src/App.scss create mode 100644 src/pages/nostr/styles.module.scss rename src/styles/{form.module.scss => form.scss} (100%) diff --git a/src/App.scss b/src/App.scss new file mode 100644 index 0000000..8ef1033 --- /dev/null +++ b/src/App.scss @@ -0,0 +1,70 @@ +@import './styles/colors.scss'; +@import './styles/sizes.scss'; +@import './styles/typography.scss'; + +:root { + // Import colors once as variables + --primary-main: #{$primary-main}; + --primary-light: #{$primary-light}; + --primary-dark: #{$primary-dark}; + + --secondary-main: #{$secondary-main}; + + --box-shadow-color: #{$box-shadow-color}; + --border-color: #{$border-color}; + + --body-background-color: #{$body-background-color}; + --overlay-background-color: #{$overlay-background-color}; + + --text-color: #{$text-color}; + --input-text-color: #{$input-text-color}; + + --review-feedback-correct: #{$review-feedback-correct}; + --review-feedback-incorrect: #{$review-feedback-incorrect}; + --review-feedback-neutral: #{$review-feedback-neutral}; + --review-feedback-selected-color: #{$review-feedback-selected-color}; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + line-height: 1.2; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin: 0; +} + +body { + color: $text-color; + font-family: $font-familiy; + letter-spacing: $letter-spacing; + font-size: $body-font-size; + font-weight: $body-font-weight; + line-height: $body-line-height; + + text-shadow: 0 0 1px rgba(0, 0, 0, 0.15); +} + +a { + font-weight: 500; + color: $primary-main; + text-decoration: none; + text-decoration-color: inherit; + transition: ease 0.4s; + + &:hover { + color: $primary-light; + text-decoration: underline; + text-decoration-color: inherit; + } +} diff --git a/src/App.tsx b/src/App.tsx index 5755be7..824db1c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,6 +12,7 @@ import { } from './routes' import { State } from './store/rootReducer' import { getNsecBunkerDelegatedKey, saveNsecBunkerDelegatedKey } from './utils' +import './App.scss' const App = () => { const authState = useSelector((state: State) => state.auth) diff --git a/src/components/Footer/style.module.scss b/src/components/Footer/style.module.scss index 79ed1c0..f428af4 100644 --- a/src/components/Footer/style.module.scss +++ b/src/components/Footer/style.module.scss @@ -36,17 +36,6 @@ font-size: 12px; color: rgba(0, 0, 0, 0.5); font-weight: 500; - - > a { - transition: ease 0.4s; - - color: $primary-main; - text-decoration-color: inherit; - - &:hover { - text-decoration: underline; - } - } } .logo { diff --git a/src/components/Landing/CardComponent/style.module.scss b/src/components/Landing/CardComponent/style.module.scss index e77f02d..b6c9d5e 100644 --- a/src/components/Landing/CardComponent/style.module.scss +++ b/src/components/Landing/CardComponent/style.module.scss @@ -13,30 +13,25 @@ flex-direction: column; gap: 15px; - word-break: break-word; - &:hover { - background: $primary-main; color: white; + background: $primary-main; .icon, a { color: inherit; } - - a:hover { - text-decoration: underline; - } } + button { transition: color 0s, background-color 0.2s; } -} -a { - color: inherit; + a { + transition: none; + } } .icon { diff --git a/src/index.css b/src/index.css index 784ec89..9b00022 100644 --- a/src/index.css +++ b/src/index.css @@ -10,6 +10,8 @@ -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; + + word-break: break-word; } * { @@ -47,23 +49,6 @@ body { overflow-wrap: break-word; } -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} - .qrzap { position: fixed; top: 80px; diff --git a/src/layouts/style.module.scss b/src/layouts/style.module.scss index 1dac6a1..c1aee30 100644 --- a/src/layouts/style.module.scss +++ b/src/layouts/style.module.scss @@ -1,63 +1,5 @@ @import '../styles/colors.scss'; @import '../styles/sizes.scss'; -@import '../styles/typography.scss'; - -:root { - // Import colors once as variables - --primary-main: #{$primary-main}; - --primary-light: #{$primary-light}; - --primary-dark: #{$primary-dark}; - - --secondary-main: #{$secondary-main}; - - --box-shadow-color: #{$box-shadow-color}; - --border-color: #{$border-color}; - - --body-background-color: #{$body-background-color}; - --overlay-background-color: #{$overlay-background-color}; - - --text-color: #{$text-color}; - --input-text-color: #{$input-text-color}; - - --review-feedback-correct: #{$review-feedback-correct}; - --review-feedback-incorrect: #{$review-feedback-incorrect}; - --review-feedback-neutral: #{$review-feedback-neutral}; - --review-feedback-selected-color: #{$review-feedback-selected-color}; -} - -body { - color: $text-color; - font-family: $font-familiy; - letter-spacing: $letter-spacing; - font-size: $body-font-size; - font-weight: $body-font-weight; - line-height: $body-line-height; - - text-shadow: 0 0 1px rgba(0, 0, 0, 0.15); - word-break: break-word; -} - -h1, -h2, -h3, -h4, -h5, -h6, -p { - margin: 0; -} - -a { - font-weight: 500; - color: $primary-main; - text-decoration: none; - - :hover { - color: $primary-light; - text-decoration: underline; - text-decoration-color: $primary-light; - } -} .main { flex-grow: 1; diff --git a/src/pages/nostr/index.tsx b/src/pages/nostr/index.tsx index 60cb7f9..562f184 100644 --- a/src/pages/nostr/index.tsx +++ b/src/pages/nostr/index.tsx @@ -22,7 +22,7 @@ import { npubToHex, queryNip05 } from '../../utils' import { hexToBytes } from '@noble/hashes/utils' import { NIP05_REGEX } from '../../constants' -import formStyles from '../../styles/form.module.scss' +import styles from './styles.module.scss' export const Nostr = () => { const [searchParams] = useSearchParams() @@ -358,7 +358,7 @@ export const Nostr = () => { {isNostrExtensionAvailable && ( <> -