Landing page - new design implementation #122

Merged
b merged 45 commits from issue-21 into staging 2024-07-31 13:06:58 +00:00
9 changed files with 81 additions and 98 deletions
Showing only changes of commit f1a26e4dc4 - Show all commits

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};
s marked this conversation as resolved
Review

These variables related to review feedback can be removed. These are leftovers from another repository.

These variables related to review feedback can be removed. These are leftovers from another repository.
}
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';