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;
+  }
+}

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)

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 {

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;
+    transition: none;
+  }
 }
 
 .icon {

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;

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;

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 && (
         <>
-          <label className={formStyles.label} htmlFor="extension-login">
+          <label className={styles.label} htmlFor="extension-login">
             Login by using a browser extension
           </label>
           <Button

src/pages/nostr/styles.module.scss

@@ -0,0 +1 @@
+@import '../../styles/form.scss';