diff --git a/public/index.html b/public/index.html index aa069f27..b70f916f 100644 --- a/public/index.html +++ b/public/index.html @@ -10,34 +10,14 @@ content="Web site created using create-react-app" /> - - - - React App + + + + Web Marker
- diff --git a/public/manifest.json b/public/manifest.json index 080d6c77..4b22a9ce 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,23 +1,6 @@ { - "short_name": "React App", - "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], + "short_name": "Web Marker", + "name": "A bookmark manager", "start_url": ".", "display": "standalone", "theme_color": "#000000", diff --git a/src/App.css b/src/App.css index 74b5e053..02993b79 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,61 @@ .App { + padding: 2vh; text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; + background-color: #1f2c38; + min-height: 96vh; display: flex; flex-direction: column; - align-items: center; - justify-content: center; font-size: calc(10px + 2vmin); color: white; } -.App-link { - color: #61dafb; +.head { + display: flex; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.search { + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + padding: 10px; + font-size: 1.5rem; } + +.search-btn { + padding: 5px; + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; + color: #1f2c38b6; +} + +.settings-btn { + padding: 5px; + border-radius: 10px; + color: #1f2c38b6; + margin-left: auto; +} + +.add-btn { + padding: 5px; + border-radius: 10px; + color: #1f2c38b6; + margin-left: 10px; +} + +textarea:focus, input:focus{ + outline: none; +} + +.material-icons-outlined.md-36 { font-size: 36px; } + +.lables { + display: flex; + font-size: 1.3rem; +} + +.lable { + padding-right: 15%; +} + +#id { + padding-right: 20px; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 37845757..2e475c9c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,20 @@ -import logo from './logo.svg'; import './App.css'; function App() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
+ + + + +
+
+

#

+

Name

+

Title

+

Link

+
); } diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afee..00000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/index.css b/src/index.css index ec2585e8..15320741 100644 --- a/src/index.css +++ b/src/index.css @@ -6,8 +6,3 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.js b/src/index.js index ef2edf8e..bd0ed774 100644 --- a/src/index.js +++ b/src/index.js @@ -2,16 +2,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; -import reportWebVitals from './reportWebVitals'; ReactDOM.render( - - - , + , document.getElementById('root') ); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c05..00000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js deleted file mode 100644 index 5253d3ad..00000000 --- a/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 8f2609b7..00000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom';