Configuration and application skeleton, add important dependencies(ty…

…pescript, sass)
SekerDAO · Jan 4, 2022 · 6b3ed91 · 6b3ed91
1 parent 526a832
commit 6b3ed91
Show file tree

Hide file tree

Showing 44 changed files with 9,679 additions and 11,586 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,13 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.5.0",
+    "@types/node": "^17.0.8",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
-    "web-vitals": "^2.1.2"
+    "typescript": "^4.5.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -34,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "node-sass": "^7.0.1"
   }
 }
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/assets/fonts/Karla-Bold.ttf b/src/assets/fonts/Karla-Bold.ttf
diff --git a/src/assets/fonts/Karla-BoldItalic.ttf b/src/assets/fonts/Karla-BoldItalic.ttf
diff --git a/src/assets/fonts/Karla-ExtraBold.ttf b/src/assets/fonts/Karla-ExtraBold.ttf
diff --git a/src/assets/fonts/Karla-ExtraBoldItalic.ttf b/src/assets/fonts/Karla-ExtraBoldItalic.ttf
diff --git a/src/assets/fonts/Karla-ExtraLight.ttf b/src/assets/fonts/Karla-ExtraLight.ttf
diff --git a/src/assets/fonts/Karla-ExtraLightItalic.ttf b/src/assets/fonts/Karla-ExtraLightItalic.ttf
diff --git a/src/assets/fonts/Karla-Italic.ttf b/src/assets/fonts/Karla-Italic.ttf
diff --git a/src/assets/fonts/Karla-Light.ttf b/src/assets/fonts/Karla-Light.ttf
diff --git a/src/assets/fonts/Karla-LightItalic.ttf b/src/assets/fonts/Karla-LightItalic.ttf
diff --git a/src/assets/fonts/Karla-Medium.ttf b/src/assets/fonts/Karla-Medium.ttf
diff --git a/src/assets/fonts/Karla-MediumItalic.ttf b/src/assets/fonts/Karla-MediumItalic.ttf
diff --git a/src/assets/fonts/Karla-Regular.ttf b/src/assets/fonts/Karla-Regular.ttf
diff --git a/src/assets/fonts/Karla-SemiBold.ttf b/src/assets/fonts/Karla-SemiBold.ttf
diff --git a/src/assets/fonts/Karla-SemiBoldItalic.ttf b/src/assets/fonts/Karla-SemiBoldItalic.ttf
diff --git a/src/assets/fonts/SairaSemiCondensed-Black.ttf b/src/assets/fonts/SairaSemiCondensed-Black.ttf
diff --git a/src/assets/fonts/SairaSemiCondensed-Bold.ttf b/src/assets/fonts/SairaSemiCondensed-Bold.ttf
diff --git a/src/assets/fonts/SairaSemiCondensed-ExtraBold.ttf b/src/assets/fonts/SairaSemiCondensed-ExtraBold.ttf
diff --git a/src/assets/fonts/SairaSemiCondensed-ExtraLight.ttf b/src/assets/fonts/SairaSemiCondensed-ExtraLight.ttf
diff --git a/src/assets/fonts/SairaSemiCondensed-Light.ttf b/src/assets/fonts/SairaSemiCondensed-Light.ttf
diff --git a/src/assets/fonts/SairaSemiCondensed-Medium.ttf b/src/assets/fonts/SairaSemiCondensed-Medium.ttf
diff --git a/src/assets/fonts/SairaSemiCondensed-Regular.ttf b/src/assets/fonts/SairaSemiCondensed-Regular.ttf
diff --git a/src/assets/fonts/SairaSemiCondensed-SemiBold.ttf b/src/assets/fonts/SairaSemiCondensed-SemiBold.ttf
diff --git a/src/assets/fonts/SairaSemiCondensed-Thin.ttf b/src/assets/fonts/SairaSemiCondensed-Thin.ttf
diff --git a/src/assets/icons/discord-grayscale.svg b/src/assets/icons/discord-grayscale.svg
diff --git a/src/assets/icons/instagram-grayscale.svg b/src/assets/icons/instagram-grayscale.svg
diff --git a/src/assets/icons/twitter-grayscale.svg b/src/assets/icons/twitter-grayscale.svg
diff --git a/src/logo.svg → src/assets/images/logo.svg b/src/logo.svg → src/assets/images/logo.svg
diff --git a/src/assets/styles/colors.scss b/src/assets/styles/colors.scss
@@ -0,0 +1,19 @@
+$dark-grey: #2D3032;
+$dark-grey75: #626465;
+$dark-grey50: #969899;
+$dark-grey25: #CBCBCC;
+$white: #FFF;
+$light-grey: #F9F9F9;
+
+$purple: #9615DB;
+$purple75: #B050E4;
+$purple50: #E5C5F6;
+$purple25: #F9F1FD;
+
+$error: #EB5467;
+$success: #48CFAE;
+$info: #4FC0E8;
+$warning: #F6BB43;
+
+$light-green: #D1F3EB;
+$light-red: #FAD4D9;
diff --git a/src/components/App/index.scss b/src/components/App/index.scss
@@ -0,0 +1,4 @@
+.app {
+  width: 100%;
+  min-height: 100vh;
+}
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
@@ -0,0 +1,18 @@
+import logo from '../../assets/images/logo.svg';
+import './index.scss';
+
+function App() {
+  return (
+    <div className="app">
+      <header className="app__header">
+        <img src={logo} className="app__logo" alt="logo" />
+      </header>
+      <main></main>
+      <footer className="app__footer">
+        <section className="main__footer-socials"></section>
+      </footer>
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.js b/src/index.js
diff --git a/src/index.scss b/src/index.scss
@@ -0,0 +1,89 @@
+@import "assets/styles/colors";
+
+@font-face {
+  font-family: 'Karla';
+  font-style: normal;
+  font-weight: normal;
+  src: url("assets/fonts/Karla-Regular.ttf");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'SairaSemiCondensed';
+  font-style: normal;
+  font-weight: 600;
+  src: url("assets/fonts/SairaSemiCondensed-SemiBold.ttf");
+  font-display: swap;
+}
+
+html {
+  font-size: 10px;
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+
+*,
+::before,
+::after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Karla, 'Open Sans', sans-serif;
+  font-size: 16px;
+  line-height: 20px;
+  color: $dark-grey;
+  background-color: $light-grey;
+}
+
+h1 {
+  font-family: SairaSemiCondensed, 'Open Sans', sans-serif;
+  display: block;
+  padding: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  color: $dark-grey;
+  text-align: left;
+}
+
+h2 {
+  font-family: SairaSemiCondensed, 'Open Sans', sans-serif;
+  padding: 0;
+  margin: 0;
+  font-size: 24px;
+  color: $dark-grey;
+  font-weight: 600;
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+h3 {
+  font-family: SairaSemiCondensed, 'Open Sans', sans-serif;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  color: $dark-grey50;
+}
+
+a {
+  text-decoration: none;
+  cursor: pointer;
+  color: $dark-grey;
+}
+
+a,
+a:hover {
+  -webkit-transition: all 0.4s ease-in-out;
+  -moz-transition: all 0.4s ease-in-out;
+  transition: all 0.4s ease-in-out;
+}
+
+p {
+  margin: 0;
+  color: $dark-grey;
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App';
+import "./index.scss"
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
diff --git a/src/setupTests.js b/src/setupTests.js
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,29 @@
+{
+    "compilerOptions": {
+      "target": "es5",
+      "lib": [
+        "dom",
+        "dom.iterable",
+        "esnext"
+      ],
+      "allowJs": true,
+      "skipLibCheck": true,
+      "esModuleInterop": true,
+      "allowSyntheticDefaultImports": true,
+      "strict": true,
+      "alwaysStrict": true,
+      "forceConsistentCasingInFileNames": true,
+      "module": "esnext",
+      "moduleResolution": "node",
+      "resolveJsonModule": true,
+      "isolatedModules": true,
+      "noEmit": true,
+      "jsx": "react-jsx",
+      "noFallthroughCasesInSwitch": true,
+      "useUnknownInCatchVariables": false
+    },
+    "include": [
+      "src"
+    ]
+  }
+