Landing page - new design implementation #122
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};
|
||||
s marked this conversation as resolved
|
||||
}
|
||||
|
||||
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'
|
||||
import { State } from './store/rootReducer'
|
||||
import { getNsecBunkerDelegatedKey, saveNsecBunkerDelegatedKey } from './utils'
|
||||
import './App.scss'
|
||||
|
||||
const App = () => {
|
||||
const authState = useSelector((state: State) => state.auth)
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
|
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
These variables related to review feedback can be removed. These are leftovers from another repository.