Skip to content

Commit c20bbde

Browse files
AuraOfDivinityAuraOfDivinity
committed
refactoring components-modals
1 parent 46d5ff6 commit c20bbde

File tree

25 files changed

+878
-555
lines changed

25 files changed

+878
-555
lines changed

‎src/App.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React, { Component } from "react";
22
import Router from "./router";
33
import "./App.css";
4-
import { Provider } from 'react-redux';
5-
import store from './store';
6-
import jwt_decode from 'jwt-decode';
4+
5+
import { Provider } from "react-redux";
6+
import store from "./store";
7+
import jwt_decode from "jwt-decode";
78
import { setAuthToken } from "./utils/setAuthToken";
89
import { setCurrentUser, logoutUser } from "./actions/authAction";
10+
import "./css/main.scss";
911

1012
class App extends Component {
1113
componentDidMount() {
@@ -14,23 +16,23 @@ class App extends Component {
1416
console.log("CHECKING TOKEN ", token);
1517
if (token) {
1618
const decodedData = jwt_decode(token);
17-
// set auth token in axios header
19+
// set auth token in axios header
1820
setAuthToken(token);
19-
// set user in the state
21+
// set user in the state
2022
setCurrentUser(decodedData);
2123
// check if token is valid or expired
2224
const currentTime = Date.now() / 1000; // in ms
2325
const expiryTime = decodedData.iat + 10800000; // 24 hrs
2426
if (expiryTime <= currentTime) {
2527
store.dispatch(logoutUser());
26-
// now redirect to home page
28+
// now redirect to home page
2729
window.location.href = "/";
2830
}
2931
}
3032
}
3133
render() {
3234
return (
33-
<Provider store={store} >
35+
<Provider store={store}>
3436
<React.Fragment>
3537
<link
3638
rel="stylesheet"
@@ -44,6 +46,6 @@ class App extends Component {
4446
);
4547
}
4648
}
47-
document.title = 'Donut';
49+
document.title = "Donut";
4850

4951
export default App;

‎src/css/abstracts/_mixins.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎src/css/abstracts/_variables.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/*------------------------------------*\
2+
#COLORS
3+
\*------------------------------------*/
4+
// Primary Colours
5+
$color-primary-blue: #1a73e8;
6+
$color-primary-black: #000;
7+
$color-primary-white: #fff;
8+
9+
// General modal colors
10+
$color-modal-title: #1a73e8;
11+
$color-modal-button: #1a73e8;
12+
$color-modal-miniheader: #90949c;
13+
$color-modal-form-label: #000000;
14+
$color-modal-field-border: #e2e2e2;
15+
$color-modal-buttton-background: #1a73e8;
16+
$color-modal-button-border: #1a73e8;
17+
$color-modal-message: #000000;
18+
$color-modal-button-active: #1a73e8;
19+
$color-modal-button-inactive: #fff;
20+
21+
//Follower modal specific colors
22+
$color-modal-follower-name: #000000;
23+
$color-modal-follower-description: #90949c;

‎src/css/base/_reset.scss‎

Whitespace-only changes.

‎src/css/base/_typography.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*------------------------------------*\
2+
#Typography
3+
\*------------------------------------*/
4+
5+
//Fonts used in the project
6+
$font-family-Inter: Inter;
7+
$font-family-Qanelas: Qanelas;
8+
$font-family-PlayfairDisplay: Playfair Display;
9+
10+
//General font sizes
11+
$font-weight-normal: 500;
12+
$font-weight-bold: 600;
13+
$font-weight-light: 400;

‎src/css/components/_modals.scss‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
.modal {
2+
.modal__header {
3+
.modal__title {
4+
.modal__main-title {
5+
font-family: $font-family-Inter;
6+
font-style: normal;
7+
font-weight: $font-weight-bold;
8+
font-size: 32px;
9+
line-height: 39px;
10+
color: $color-modal-title;
11+
}
12+
.modal__mini-title {
13+
font-family: $font-family-Inter;
14+
font-style: normal;
15+
font-weight: $font-weight-normal;
16+
font-size: 12px;
17+
line-height: 19px;
18+
color: $color-modal-miniheader;
19+
letter-spacing: 0.2em;
20+
padding-top: 5px;
21+
}
22+
}
23+
}
24+
.modal__body {
25+
.modal__form {
26+
.modal__row {
27+
.modal__group {
28+
.modal__label {
29+
font-family: $font-family-Inter;
30+
font-weight: $font-weight-normal;
31+
font-size: 14px;
32+
color: $color-modal-form-label;
33+
margin-bottom: 3px;
34+
line-height: 17px;
35+
}
36+
.modal__post {
37+
border: 0.75px solid $color-modal-field-border;
38+
box-sizing: border-box;
39+
border-radius: 5px;
40+
text-align: left;
41+
resize: none;
42+
}
43+
.modal__message {
44+
font-family: $font-family-Inter;
45+
font-style: normal;
46+
font-weight: $font-weight-normal;
47+
font-size: 14px;
48+
line-height: 17px;
49+
50+
color: $color-modal-message;
51+
}
52+
}
53+
}
54+
.modal__secondary-title {
55+
font-family: $font-family-Inter;
56+
font-style: normal;
57+
font-weight: $font-weight-normal;
58+
font-size: 12px;
59+
line-height: 19px;
60+
color: $color-modal-miniheader;
61+
letter-spacing: 0.2em;
62+
padding-top: 18px;
63+
}
64+
}
65+
.modal__follower {
66+
margin-top: 15px;
67+
margin-bottom: 10px;
68+
justify-content: space-between;
69+
70+
.modal__followerPhoto {
71+
margin-top: 3px;
72+
height: 43px;
73+
width: 43px;
74+
}
75+
.modal__followerName {
76+
font-family: $font-family-Inter;
77+
font-style: normal;
78+
font-weight: $font-weight-bold;
79+
font-size: 18px;
80+
display: block;
81+
color: $color-modal-follower-name;
82+
}
83+
.modal__followerDescription {
84+
font-family: $font-family-Inter;
85+
font-style: normal;
86+
font-weight: normal;
87+
font-size: 12px;
88+
color: $color-modal-follower-description;
89+
display: block;
90+
}
91+
.modal__followButton {
92+
background: #fff;
93+
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
94+
border-radius: 34px;
95+
}
96+
.modal__followText {
97+
font-family: $font-family-Inter;
98+
font-style: normal;
99+
font-weight: $font-weight-normal;
100+
font-size: 12px;
101+
line-height: 15px;
102+
103+
color: #1a73e8;
104+
}
105+
}
106+
}
107+
.modal__buttons {
108+
.modal__save {
109+
background: $color-modal-button-active;
110+
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
111+
border-radius: 34px;
112+
width: 104px;
113+
height: 42px;
114+
margin-right: 20px;
115+
margin-bottom: 10px;
116+
margin-left: 14px;
117+
.modal__buttontext {
118+
font-family: $font-family-Inter;
119+
font-style: normal;
120+
font-weight: bold;
121+
font-size: 18px;
122+
line-height: 22px;
123+
/* identical to box height */
124+
125+
color: #ffffff;
126+
}
127+
}
128+
.modal__cancel {
129+
border: 1px solid #1a73e8;
130+
background: $color-modal-button-inactive;
131+
box-sizing: border-box;
132+
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
133+
border-radius: 34px;
134+
margin-right: 20px;
135+
margin-bottom: 10px;
136+
width: 104px;
137+
height: 42px;
138+
.modal__buttontext {
139+
font-family: $font-family-Inter;
140+
font-style: normal;
141+
font-weight: $font-weight-normal;
142+
font-size: 18px;
143+
line-height: 22px;
144+
/* identical to box height */
145+
color: #1a73e8;
146+
}
147+
}
148+
}
149+
}

‎src/css/layouts/_footer.scss‎

Whitespace-only changes.

‎src/css/layouts/_header.scss‎

Whitespace-only changes.

‎src/css/main.scss‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/*------------------------------------*\
2+
#CONTENTS
3+
\*------------------------------------*/
4+
/**
5+
* ABSTRACTS..............................Declarations of Sass variables & mixins
6+
* BASE...................................Default element styles
7+
* LAYOUT.................................Layout-specific styles
8+
* COMPONENTS.............................Component styles
9+
* PAGES..................................Page specific styles
10+
* THEMES.................................Theme styles
11+
* VENDORS...............................
12+
*/
13+
14+
/*------------------------------------*\
15+
#ABSTRACTS
16+
\*------------------------------------*/
17+
@import "./abstracts/variables";
18+
@import "./abstracts//mixins";
19+
20+
/*------------------------------------*\
21+
#BASE
22+
\*------------------------------------*/
23+
@import "./base/reset";
24+
@import "./base/typography";
25+
26+
/*------------------------------------*\
27+
#COMPONENTS
28+
\*------------------------------------*/
29+
30+
@import "./components/modals";
31+
32+
/*------------------------------------*\
33+
#LAYOUT
34+
\*------------------------------------*/
35+
@import "./layouts/header";
36+
@import "./layouts/footer";
37+
38+
/*------------------------------------*\
39+
#PAGES
40+
\*------------------------------------*/
41+
42+
/*------------------------------------*\
43+
#THEMES
44+
\*------------------------------------*/
45+
46+
/*------------------------------------*\
47+
#VENDORS
48+
\*------------------------------------*/

‎src/svgs/logo-image.jpg‎

28.3 KB
Loading

0 commit comments

Comments
 (0)