From ee997bcde7cebf94c82106bacf6a4712200aac6a Mon Sep 17 00:00:00 2001 From: Daksh Chauhan Date: Mon, 30 Aug 2021 00:40:13 +0530 Subject: [PATCH] Change Font, pretty format code. Signed-off-by: Daksh Chauhan --- soke-vise/src/App.css | 44 +-- soke-vise/src/App.js | 11 +- soke-vise/src/baseUrl.js | 2 +- soke-vise/src/components/Card/card.css | 85 +++--- soke-vise/src/components/Card/index.jsx | 18 +- soke-vise/src/components/MainBody/index.jsx | 6 +- .../src/components/MainBody/mainBody.css | 287 ++++++++---------- soke-vise/src/index.css | 15 +- soke-vise/src/index.js | 9 +- 9 files changed, 227 insertions(+), 250 deletions(-) diff --git a/soke-vise/src/App.css b/soke-vise/src/App.css index 74b5e05..4a640e8 100644 --- a/soke-vise/src/App.css +++ b/soke-vise/src/App.css @@ -1,38 +1,38 @@ .App { - text-align: center; + text-align: center; } .App-logo { - height: 40vmin; - pointer-events: none; + height: 40vmin; + pointer-events: none; } @media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } + .App-logo { + animation: App-logo-spin infinite 20s linear; + } } .App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; } .App-link { - color: #61dafb; + color: #61dafb; } @keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/soke-vise/src/App.js b/soke-vise/src/App.js index b6cd114..12903d1 100644 --- a/soke-vise/src/App.js +++ b/soke-vise/src/App.js @@ -1,11 +1,12 @@ import logo from './logo.svg'; // import './App.css'; import MainBody from "./components/MainBody" + function App() { - return ( - - - ); + return ( < + MainBody > < /MainBody> + + ); } -export default App; +export default App; \ No newline at end of file diff --git a/soke-vise/src/baseUrl.js b/soke-vise/src/baseUrl.js index c55564f..5279954 100644 --- a/soke-vise/src/baseUrl.js +++ b/soke-vise/src/baseUrl.js @@ -1 +1 @@ -export const baseUrl = "https://42e5-2405-201-4019-9b7b-55d1-7b40-bc65-d7ae.ngrok.io" \ No newline at end of file +export const baseUrl = "http://localhost:8080" \ No newline at end of file diff --git a/soke-vise/src/components/Card/card.css b/soke-vise/src/components/Card/card.css index 9827919..bd8d745 100644 --- a/soke-vise/src/components/Card/card.css +++ b/soke-vise/src/components/Card/card.css @@ -1,51 +1,50 @@ -.title{ - width: 912px; -height: 26px; - -/* Regular text */ - -font-family: Apercu Pro; -font-style: normal; -font-weight: 800; -font-size: 40px; -line-height: 26px; -/* identical to box height, or 130% */ - - -/* Black */ - -color: #000000; - - -/* Inside Auto Layout */ - -flex: none; -order: 0; -flex-grow: 0; -margin: 20px 0px; +.title { + width: 912px; + height: 26px; + /* Regular text */ + font-family: Noto Sans; + font-style: normal; + font-weight: 800; + font-size: 40px; + line-height: 26px; + /* identical to box height, or 130% */ + /* Black */ + color: #000000; + /* Inside Auto Layout */ + flex: none; + order: 0; + flex-grow: 0; + margin: 20px 0px; } -.flex-container{ - display: flex; - justify-content: space-between; +.flex-container { + display: flex; + justify-content: space-between; } -.inner-text{ - font-size: 20px; - margin-bottom: 20px; +.inner-text { + font-family: Noto Sans; + font-style: normal; + /* font-weight: 800; */ + /* font-size: 40px; */ + font-size: 16px; + margin-bottom: 20px; } -.link,.link:visited{ - text-decoration: none; +.link, +.link:visited { + text-decoration: none; } -.card{ - - /* width: 80%; */ - padding: 20px; - box-sizing: border-box; - margin: 20px auto; - background: #F2F4F8; - border-radius: 30px; - -} +.card { + font-family: Noto Sans; + /* font-style: normal; */ + /* font-weight: 800; */ + font-size: 12px; + /* width: 80%; */ + padding: 20px; + box-sizing: border-box; + margin: 20px auto; + background: #F2F4F8; + border-radius: 30px; +} \ No newline at end of file diff --git a/soke-vise/src/components/Card/index.jsx b/soke-vise/src/components/Card/index.jsx index d1e8a58..e4b23c8 100644 --- a/soke-vise/src/components/Card/index.jsx +++ b/soke-vise/src/components/Card/index.jsx @@ -1,16 +1,16 @@ import React from 'react' import "./card.css" -export default function Card({title,innerText,date,link}) { +export default function Card({ title, innerText, date, link }) { return (
-
{title}
-
- -
-
-
{date}
- visit -
+
{title}
+
+ +
+
+
{date}
+ visit +
) } diff --git a/soke-vise/src/components/MainBody/index.jsx b/soke-vise/src/components/MainBody/index.jsx index 70cf6e3..736a528 100644 --- a/soke-vise/src/components/MainBody/index.jsx +++ b/soke-vise/src/components/MainBody/index.jsx @@ -33,8 +33,8 @@ export default function MainBody() { }) - if(lis.length===0){ - lis=[{title:"No data found",url:"",lastaccessed:"",dom:""}] + if (lis.length === 0) { + lis = [{ title: "No data found", url: "", lastaccessed: "", dom: "" }] } return lis @@ -165,7 +165,7 @@ export default function MainBody() { } - + ) diff --git a/soke-vise/src/components/MainBody/mainBody.css b/soke-vise/src/components/MainBody/mainBody.css index 759d7e3..194e9cd 100644 --- a/soke-vise/src/components/MainBody/mainBody.css +++ b/soke-vise/src/components/MainBody/mainBody.css @@ -1,8 +1,9 @@ body { - background: #F2F4F8; - } - .main-container{ - background: white; + background: #F2F4F8; +} + +.main-container { + background: white; height: 80vh; padding: 24px; margin: 50px; @@ -11,180 +12,160 @@ body { justify-content: space-evenly; margin-bottom: 0px; border-radius: 20px; - - } +} + +.top-container { + display: flex; + height: 10%; + justify-content: space-evenly; +} - .top-container { +.search-bar { + /* Input field background */ + width: 60%; + height: 74px; + background: #F2F4F8; + border-radius: 12px; + outline: none; + border-style: none; + /* Inside Auto Layout */ + flex: none; + order: 0; + flex-grow: 0; + padding-left: 40px; + font-family: Apercu Pro; + font-style: normal; + font-weight: 500; + font-size: 20px; + line-height: 26px; + color: #000; +} +.search-button { + width: 15%; + height: 74px; + border-style: none; + color: white; + border-radius: 12px; + background: black; + font-family: Apercu Pro; + font-style: normal; + font-weight: 500; + font-size: 20px; + line-height: 26px; +} - display: flex; - height: 10%; - justify-content: space-evenly; - } +.select-box { + width: 15%; + position: relative; +} - .search-bar { +.select { + width: 100%; + overflow: hidden; + height: 74px; + font-size: 20px; + box-sizing: border-box; + border-radius: 12px; + outline: none; + border-style: none; + border: 2px solid #F2F4F8; + background: white; +} - /* Input field background */ - width: 60%; - height: 74px; - background: #F2F4F8; - border-radius: 12px; - outline: none; - border-style: none; - /* Inside Auto Layout */ +.drop-down-item { + border: 1px solid white; + border-radius: 5px; + padding: 5px; + background: #F2F4F8; + font-family: Apercu Pro; + font-style: normal; + font-weight: 500; + font-size: 20px; + line-height: 26px; + color: #000; +} - flex: none; - order: 0; - flex-grow: 0; +.selected-container { + display: flex; + margin-top: 10px; +} - padding-left: 40px; - font-family: Apercu Pro; - font-style: normal; - font-weight: 500; - font-size: 20px; - line-height: 26px; - color: #000; - - } +.drop-downs { + position: absolute; + z-index: 1; + flex-direction: column; + display: flex; + width: 100%; +} +.bottom-selected-items { + margin: 10px; + padding: 10px; + position: relative; + box-sizing: border-box; + border-radius: 12px; + display: flex; + justify-content: space-between; + outline: none; + background: #F2F4F8; + border-style: none; +} - .search-button { +.cross-icon { + position: absolute; + top: -10px; + right: -10px; + outline: none; + border-style: none; + /* border:2px solid rgb(112, 65, 65); */ + border-radius: 50px; +} +.card-container { + height: 600px; + overflow: scroll; + /* margin-top: 20px; */ + overflow-x: hidden; + height: 80%; + /* overflow-y:visible; */ +} - width: 15%; - height: 74px; - border-style: none; - color: white; - border-radius: 12px; - background: black; - - font-family: Apercu Pro; - font-style: normal; - font-weight: 500; - font-size: 20px; - line-height: 26px; - } - .select-box{ - width: 15%; - position: relative; - } - - - .select { - - - - - width: 100%; - - overflow: hidden; - height: 74px; - font-size: 20px; - box-sizing: border-box; - border-radius: 12px; - outline: none; - border-style: none; - border:2px solid #F2F4F8; - background: white; - - } - - .drop-down-item { - border: 1px solid white; - border-radius: 5px; - padding: 5px; - background:#F2F4F8 ; - - font-family: Apercu Pro; - font-style: normal; - font-weight: 500; - font-size: 20px; - line-height: 26px; - color: #000; - - - } - - .selected-container{ - display: flex; - margin-top: 10px; - } - - .drop-downs{ - position: absolute; - z-index: 1; - flex-direction: column; - display: flex; - width: 100%; - - } - - - .bottom-selected-items{ - - - - - margin: 10px; - padding: 10px; - position: relative; - box-sizing: border-box; - border-radius: 12px; - display: flex; - justify-content: space-between; - outline: none; - background: #F2F4F8; - - border-style: none; - - } - .cross-icon{ - position: absolute; - top:-10px; - right: -10px; - outline: none; - border-style: none; - /* border:2px solid rgb(112, 65, 65); */ - border-radius: 50px; - } - - - .card-container{ - height: 600px; - overflow: scroll; - /* margin-top: 20px; */ - overflow-x: hidden; - height: 80%; - /* overflow-y:visible; */ - } .card-container::-webkit-scrollbar { -width: 20px; + width: 20px; } -.loading{ +.loading { font-size: 50px; } + + /* Track */ + .card-container::-webkit-scrollbar-track { -background: white; -border-radius: 10px; + background: white; + border-radius: 10px; } + /* Handle */ + .card-container::-webkit-scrollbar-thumb { -background:#EDF6F8; -height: 75px; -border: 5px solid white; -background-clip: padding-box; -/* border-radius: 10px; */ + background: #EDF6F8; + height: 75px; + border: 5px solid white; + background-clip: padding-box; + /* border-radius: 10px; */ } + /* Handle on hover */ + .card-container::-webkit-scrollbar-thumb:hover { -background:#EDF6F8; + background: #EDF6F8; } - em{ - font-weight: 900; - font-style: normal; - } \ No newline at end of file +em { + font-weight: 900; + font-style: normal; +} \ No newline at end of file diff --git a/soke-vise/src/index.css b/soke-vise/src/index.css index ec2585e..7b704c7 100644 --- a/soke-vise/src/index.css +++ b/soke-vise/src/index.css @@ -1,13 +1,10 @@ body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; +} \ No newline at end of file diff --git a/soke-vise/src/index.js b/soke-vise/src/index.js index 34a56df..caf0eab 100644 --- a/soke-vise/src/index.js +++ b/soke-vise/src/index.js @@ -3,8 +3,7 @@ import ReactDOM from 'react-dom'; // import './index.css'; import App from './App'; -ReactDOM.render( - , - document.getElementById('root') -); - +ReactDOM.render( < + App / > , + document.getElementById('root') +); \ No newline at end of file