Skip to content

Commit 842f7ad

Browse files
mattwobertsmattwoberts
committed
Minor changes to the app styling.
1 parent 4e1760f commit 842f7ad

17 files changed

Lines changed: 108 additions & 39 deletions

File tree

‎public/assets/styles/reset.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ body {
2020
background-color: var(--colors-gray-100);
2121
font-size: get("font.size.base");
2222
font-family: $font-base;
23+
line-height: 1.6;
2324
}
2425

2526
body.dark-theme {

‎public/assets/styles/utility/display.scss‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
background-color: var(--colors-white);
7373
border: 1px solid var(--colors-gray-200);
7474
padding: spacing(4);
75+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.02);
7576
}
7677

7778
.flex {
@@ -179,16 +180,16 @@
179180
}
180181

181182
.shadow-sm {
182-
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
183+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
183184
}
184185
.shadow {
185-
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
186+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
186187
}
187188
.shadow-md {
188-
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
189+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
189190
}
190191
.shadow-lg {
191-
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
192+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
192193
}
193194

194195
.rounded {
@@ -239,7 +240,8 @@
239240
}
240241

241242
.hover {
243+
transition: all 0.15s ease;
242244
&:hover {
243-
background-color: var(--colors-gray-100);
245+
background-color: var(--colors-gray-50);
244246
}
245247
}

‎public/assets/styles/utility/outline.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
*:focus {
22
outline: 0;
33
&:not(.no-focus) {
4-
border-color: get("colors.primary.light") !important;
5-
box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, get("colors.primary.light") 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px !important;
4+
border-color: var(--colors-primary-base) !important;
5+
box-shadow: 0 0 0 3px rgba(45, 87, 237, 0.1) !important;
66
}
7-
transition: all 0.3s ease;
7+
transition: all 0.15s ease;
88
}

‎public/assets/styles/utility/page.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
}
66

77
.page {
8-
padding-top: spacing(5);
9-
padding-bottom: spacing(4);
8+
padding-top: spacing(6);
9+
padding-bottom: spacing(6);
1010
}
1111

1212
@include media("sm") {

‎public/assets/styles/utility/text.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
p,
22
pre {
33
margin: 0 0 14px;
4-
line-height: 1.5;
4+
line-height: 1.6;
55
}
66

77
p:last-child,
@@ -48,6 +48,7 @@ pre:last-child {
4848
.text-body {
4949
font-size: get("font.size.base");
5050
color: var(--colors-gray-700);
51+
line-height: 1.6;
5152
}
5253

5354
.text-sm {
@@ -71,7 +72,7 @@ pre:last-child {
7172

7273
.text-muted {
7374
font-size: get("font.size.xs");
74-
color: var(--colors-gray-700);
75+
color: var(--colors-gray-600);
7576
}
7677

7778
.text-link {

‎public/assets/styles/variables.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@ $all: (
2727
font: $font,
2828
border: (
2929
radius: (
30-
small: 4px,
31-
medium: 6px,
32-
large: 8px,
30+
small: 6px,
31+
medium: 8px,
32+
large: 12px,
3333
full: 999px,
3434
),
3535
),

‎public/components/Header.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@ export const Header = (props: HeaderProps) => {
3030
const hideRSSModal = () => setIsRSSModalOpen(false)
3131

3232
return (
33-
<div id="c-header" className="bg-white" {...(props.hasInert && { inert: "true" })}>
33+
<div id="c-header" className="bg-white" style={{ borderBottom: "1px solid var(--colors-gray-200)" }} {...(props.hasInert && { inert: "true" })}>
3434
<SignInModal isOpen={isSignInModalOpen} onClose={hideSignInModal} />
3535
<RSSModal isOpen={isRSSModalOpen} onClose={hideRSSModal} url={`${fider.settings.baseURL}/feed/global.atom`} />
36-
<HStack className="c-menu shadow p-4 w-full">
36+
<HStack className="c-menu p-4 w-full">
3737
<div className="container">
3838
<HStack justify="between">
3939
<a href="/" className="flex flex-x flex-items-center flex--spacing-2 h-8">

‎public/components/VoteCounter.scss‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,51 @@
33
.c-vote-counter {
44
&__button {
55
font-size: get("font.size.lg");
6-
// border: none;
76
width: sizing(12);
87
height: sizing(12);
98
cursor: pointer;
10-
// background-color: transparent;
119
text-align: center;
1210
margin: 0 auto;
1311
padding: 3px 0 8px 0;
14-
color: var(--colors-gray-700);
12+
color: var(--colors-gray-600);
1513
display: flex;
1614
flex-direction: column;
1715
align-items: center;
16+
border-radius: 8px;
17+
transition: all 0.15s ease;
18+
background-color: transparent;
19+
border: 1px solid transparent;
1820

1921
svg {
20-
color: var(--colors-gray-700);
22+
color: var(--colors-gray-600);
2123
margin-bottom: -2px;
24+
transition: all 0.15s ease;
25+
}
26+
27+
&:hover {
28+
background-color: var(--colors-gray-50);
29+
color: var(--colors-primary-base);
30+
svg {
31+
color: var(--colors-primary-base);
32+
transform: scale(1.1);
33+
}
2234
}
2335

2436
&--voted {
2537
justify-content: center;
2638
padding: 0;
2739
font-weight: get("font.weight.bold");
28-
}
29-
30-
&--voted,
31-
&:hover {
40+
background-color: var(--colors-blue-50);
3241
color: var(--colors-primary-base);
42+
border-color: var(--colors-primary-light);
43+
3344
svg {
3445
color: var(--colors-primary-base);
3546
}
47+
48+
&:hover {
49+
background-color: var(--colors-blue-100);
50+
}
3651
}
3752

3853
&--disabled {

‎public/components/common/Avatar.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,6 @@
44
border-radius: 50%;
55
vertical-align: middle;
66
display: inline-block;
7+
border: 2px solid var(--colors-white);
8+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
79
}

‎public/components/common/Button.scss‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,15 @@
66
align-items: center;
77
cursor: pointer;
88
font-size: get("font.size.base");
9-
border-radius: 4px;
9+
border-radius: 8px;
1010
border: none;
1111
padding: 8px 16px;
1212
font-weight: 500;
1313
white-space: nowrap;
14+
transition: all 0.15s ease;
1415

1516
&:active {
16-
transform: scale(0.99);
17+
transform: scale(0.98);
1718
}
1819

1920
svg + *,
@@ -32,33 +33,40 @@
3233

3334
&--secondary {
3435
color: var(--colors-gray-900);
35-
background-color: var(--colors-gray-100);
36+
background-color: var(--colors-white);
3637
border: 1px solid var(--colors-gray-300);
38+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
3739

3840
&:hover {
39-
background-color: var(--colors-gray-100);
41+
background-color: var(--colors-gray-50);
42+
border-color: var(--colors-gray-400);
43+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
4044
}
4145
}
4246

4347
&--primary {
4448
color: var(--colors-white);
4549
background-color: var(--colors-primary-base);
4650
border: 1px solid var(--colors-primary-base);
51+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
4752

4853
&:hover {
4954
background-color: var(--colors-primary-dark);
55+
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
5056
}
5157
}
5258

5359
&--danger {
5460
color: var(--colors-red-600);
5561
border: 1px solid var(--colors-gray-300);
5662
background-color: var(--colors-white);
63+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
5764

5865
&:hover {
5966
color: var(--colors-white);
6067
border: 1px solid var(--colors-red-600);
6168
background-color: var(--colors-red-600);
69+
box-shadow: 0 2px 4px 0 rgba(220, 38, 38, 0.2);
6270
}
6371
}
6472

0 commit comments

Comments
 (0)