chore: styling cleanup
This commit is contained in:
parent
aa5aa60c6a
commit
f1a26e4dc4
70
src/App.scss
Normal file
70
src/App.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
@ -12,6 +12,7 @@ import {
|
|||||||
} from './routes'
|
} from './routes'
|
||||||
import { State } from './store/rootReducer'
|
import { State } from './store/rootReducer'
|
||||||
import { getNsecBunkerDelegatedKey, saveNsecBunkerDelegatedKey } from './utils'
|
import { getNsecBunkerDelegatedKey, saveNsecBunkerDelegatedKey } from './utils'
|
||||||
|
import './App.scss'
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const authState = useSelector((state: State) => state.auth)
|
const authState = useSelector((state: State) => state.auth)
|
||||||
|
@ -36,17 +36,6 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: rgba(0, 0, 0, 0.5);
|
color: rgba(0, 0, 0, 0.5);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
> a {
|
|
||||||
transition: ease 0.4s;
|
|
||||||
|
|
||||||
color: $primary-main;
|
|
||||||
text-decoration-color: inherit;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
|
@ -13,30 +13,25 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
|
|
||||||
word-break: break-word;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $primary-main;
|
|
||||||
color: white;
|
color: white;
|
||||||
|
background: $primary-main;
|
||||||
|
|
||||||
.icon,
|
.icon,
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
transition:
|
transition:
|
||||||
color 0s,
|
color 0s,
|
||||||
background-color 0.2s;
|
background-color 0.2s;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
transition: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
|
@ -10,6 +10,8 @@
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
text-size-adjust: 100%;
|
text-size-adjust: 100%;
|
||||||
|
|
||||||
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@ -47,23 +49,6 @@ body {
|
|||||||
overflow-wrap: break-word;
|
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 {
|
.qrzap {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 80px;
|
top: 80px;
|
||||||
|
@ -1,63 +1,5 @@
|
|||||||
@import '../styles/colors.scss';
|
@import '../styles/colors.scss';
|
||||||
@import '../styles/sizes.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 {
|
.main {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
@ -22,7 +22,7 @@ import { npubToHex, queryNip05 } from '../../utils'
|
|||||||
import { hexToBytes } from '@noble/hashes/utils'
|
import { hexToBytes } from '@noble/hashes/utils'
|
||||||
import { NIP05_REGEX } from '../../constants'
|
import { NIP05_REGEX } from '../../constants'
|
||||||
|
|
||||||
import formStyles from '../../styles/form.module.scss'
|
import styles from './styles.module.scss'
|
||||||
|
|
||||||
export const Nostr = () => {
|
export const Nostr = () => {
|
||||||
const [searchParams] = useSearchParams()
|
const [searchParams] = useSearchParams()
|
||||||
@ -358,7 +358,7 @@ export const Nostr = () => {
|
|||||||
|
|
||||||
{isNostrExtensionAvailable && (
|
{isNostrExtensionAvailable && (
|
||||||
<>
|
<>
|
||||||
<label className={formStyles.label} htmlFor="extension-login">
|
<label className={styles.label} htmlFor="extension-login">
|
||||||
Login by using a browser extension
|
Login by using a browser extension
|
||||||
</label>
|
</label>
|
||||||
<Button
|
<Button
|
||||||
|
1
src/pages/nostr/styles.module.scss
Normal file
1
src/pages/nostr/styles.module.scss
Normal file
@ -0,0 +1 @@
|
|||||||
|
@import '../../styles/form.scss';
|
Loading…
Reference in New Issue
Block a user