chore: styling cleanup

This commit is contained in:
enes 2024-07-30 12:23:38 +02:00
parent aa5aa60c6a
commit f1a26e4dc4
9 changed files with 81 additions and 98 deletions

70
src/App.scss Normal file
View File

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

View File

@ -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)

View File

@ -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 {

View File

@ -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 {

View File

@ -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;

View File

@ -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;

View File

@ -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

View File

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