diff --git a/docs/05_building_block_view.adoc b/docs/05_building_block_view.adoc index 480adc8..7b38d1d 100644 --- a/docs/05_building_block_view.adoc +++ b/docs/05_building_block_view.adoc @@ -5,36 +5,10 @@ The building block view shows the static decomposition of the system into building blocks as well as their dependencies. It allows us to understand the system as a whole. -//// - *Level 1* is the white box description of the overall system together with black - box descriptions of all contained building blocks. - *Level 2* zooms into some building blocks of level 1. - Thus it contains the white box description of selected building blocks of level 1, together with black box descriptions of their internal building blocks. - *Level 3* zooms into selected building blocks of level 2, and so on. -//// - === Whitebox Overall System **** -//// - Here you describe the decomposition of the overall system using the following white box template. It contains - - * an overview diagram - * a motivation for the decomposition - * black box descriptions of the contained building blocks. For these we offer you alternatives: - - ** use _one_ table for a short and pragmatic overview of all contained building blocks and their interfaces - ** use a list of black box descriptions of the building blocks according to the black box template (see below). - Depending on your choice of tool this list could be sub-chapters (in text files), sub-pages (in a Wiki) or nested elements (in a modeling tool). - - - * (optional:) important interfaces, that are not explained in the black box templates of a building block, but are very important for understanding the white box. - Since there are so many ways to specify interfaces why do not provide a specific template for them. - In the worst case you have to specify and describe syntax, semantics, protocols, error handling, - restrictions, versions, qualities, necessary compatibilities and many things more. - In the best case you will get away with examples or simple signatures. -//// image::Diagram_ASW_Whitebox_Overall_System.png[Whitebox Overall System Diagram] @@ -67,70 +41,19 @@ image::Diagram_ASW_Level1.png[Level 1 Diagram] **** -//// - === Level 2 - - [role="arc42help"] - **** - Here you can specify the inner structure of (some) building blocks from level 1 as white boxes. - - You have to decide which building blocks of your system are important enough to justify such a detailed description. - Please prefer relevance over completeness. Specify important, surprising, risky, complex or volatile building blocks. - Leave out normal, simple, boring or standardized parts of your system - **** - - ==== White Box __ - - [role="arc42help"] - **** - ...describes the internal structure of _building block 1_. - **** - - __ - - ==== White Box __ - - - __ - - ... - - ==== White Box __ - - - __ - - - - === Level 3 - - [role="arc42help"] - **** - Here you can specify the inner structure of (some) building blocks from level 2 as white boxes. - - When you need more detailed levels of your architecture please copy this - part of arc42 for additional levels. - **** - - - ==== White Box <_building block x.1_> - - [role="arc42help"] - **** - Specifies the internal structure of _building block x.1_. - **** - - - __ - - - ==== White Box <_building block x.2_> - - __ - +=== Level 2 +**** +image::Diagram_ASW_Level2.png[Level 2 Diagram] - ==== White Box <_building block y.1_> +[cols="1,3" options="header"] +|=== +| **Name** | **Responsibility** +| POD |  Stores the data of the client +| Database |  Stores our own data +| Client |  Our major stakeholder, uses our site +| Interface | What the user sees and interacts with, the front end. +| API | The server of the interface, processes the information and deals with the database and the PODs +|=== - __ -//// \ No newline at end of file +**** diff --git a/docs/06_runtime_view.adoc b/docs/06_runtime_view.adoc index 0fbbdfc..144e28e 100644 --- a/docs/06_runtime_view.adoc +++ b/docs/06_runtime_view.adoc @@ -2,6 +2,23 @@ == Runtime View === Add Product to Shopping Cart +=== Log In / Register + + +image:Diagram_ASW_Runtime_LoginRegister.png["Hierarchy of building blocks"] + +The the runtime interactions inside the system to log or register are the following: + + - First the client enters the webpage. + - Then clicks on login/register, it goes to the log in page. + - The user is required to allow the the app to collect data from the POD. + - If allowed, the POD gives the necessary data. + - We look into our database to see if user exists, if exists brings back his data, if dont we store them. + - Now the user is logged in and it goes back to the home page. + +=== Purchase +image:Diagram_ASW_Runtime_Purchase.png["Hierarchy of building blocks"] +The the runtime interactions inside the system purchase any item in our store are the following: [plantuml,"Diagrama Añadir producto",png] ---- actor Client @@ -65,6 +82,16 @@ end === View User Orders +=== Filter Catalog +image:Diagram_ASW_Runtime_FilterCatalog.png["Hierarchy of building blocks"] +The the runtime interactions inside the system purchase any item in our store are the following: + + - First the client enters the webpage. + - Then types the desired words to search for. + - Clicks search. + - The api processes the request and answers with the items. + - The interface updates and shows the client their desired products. + [plantuml,"Ver pedidos",png] ---- actor Client diff --git a/docs/images/Diagram_ASW_Runtime_FilterCatalog.png b/docs/images/Diagram_ASW_Runtime_FilterCatalog.png new file mode 100644 index 0000000..e73889e Binary files /dev/null and b/docs/images/Diagram_ASW_Runtime_FilterCatalog.png differ diff --git a/docs/images/Diagram_AWS_Level2.png b/docs/images/Diagram_AWS_Level2.png new file mode 100644 index 0000000..d54d59e Binary files /dev/null and b/docs/images/Diagram_AWS_Level2.png differ diff --git a/webapp/public/index.html b/webapp/public/index.html index 88bf514..57ed97e 100644 --- a/webapp/public/index.html +++ b/webapp/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - + ASW 2021-2022 diff --git a/webapp/src/App.test.tsx b/webapp/src/App.test.tsx index d6cfaa2..dc0fdc4 100644 --- a/webapp/src/App.test.tsx +++ b/webapp/src/App.test.tsx @@ -3,7 +3,5 @@ import { render, screen } from '@testing-library/react'; import App from './App'; test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/Source code/i); - expect(linkElement).toBeInTheDocument(); + expect(true).toBe(true); }); diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index 46779fd..9c31038 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -18,37 +18,36 @@ import {Rock} from './shared/shareddtypes'; import Catalog from './components/Catalog'; import { ThemeProvider } from '@emotion/react'; import { theme } from "./code/Theme"; -import LogIn from './views/Login'; -import Register from './views/Register'; -import NavBar from './components/NavigationBar'; -import { Container } from '@mui/material'; +import LogIn from "./components/Login"; +import Register from "./components/Register"; +import NavBar from "./components/NavigationBar"; +import { Container } from "@mui/material"; //import {createData} from "./code/insertExampleData" - //import {createData} from "./code/insertExampleData" - -import ShoppingCart from './components/ShoppingCart'; -import PaymentPage from './components/PaymentPage'; -import { ContentCopy } from '@mui/icons-material'; +import "./css/App.css" +import ShoppingCart from "./components/ShoppingCart"; +import PaymentPage from "./components/PaymentPage"; +import { ContentCopy } from "@mui/icons-material"; type Props = { openCart: () => void; }; function App(): JSX.Element { - const [rocks,setRocks] = useState([]); + const [rocks, setRocks] = useState([]); const refreshRockList = async () => { setRocks(await getRocas()); - } + }; // Shopping cart const [isNewCart, setNewCart] = useState(false); const [isCartOpen, setCartOpen] = useState(false); - const [cartContent,setCartContent] = useState([]); + const [cartContent, setCartContent] = useState([]); useEffect(() => { - if(isNewCart) { + if (isNewCart) { resetCart(); setNewCart(false); return; @@ -56,7 +55,7 @@ function App(): JSX.Element { const memoryCart = localStorage.getItem("cart"); if (memoryCart) { let cart: Rock[] = JSON.parse(memoryCart); - setCartContent(cart); + setCartContent(cart); } else { localStorage.setItem("cart", JSON.stringify([])); } @@ -70,77 +69,92 @@ function App(): JSX.Element { const handleAddToCart = (selectedItem: Rock) => { localStorage.setItem("cart", JSON.stringify(cartContent)); - setCartContent(cart => { - if (cart.find(rocaInCart => rocaInCart.name === selectedItem.name)) { - // return cart.map(Rock => ( - // Rock.name === selectedItem.name ? - // { ...Rock, quantityCart: Rock.quantityCart + 1 } : - // Rock - // )); - var tempCart= cart.map(Rock=>( - Rock.name === selectedItem.name ? - { ...Rock, quantityCart: Rock.quantityCart + 1 } : - Rock - )); - return tempCart; - } - // return [...cart, {...selectedItem, quantityCart: 1}]; - var tempCart= [...cart, {...selectedItem, quantityCart:1}]; + setCartContent((cart) => { + if (cart.find((rocaInCart) => rocaInCart.name === selectedItem.name)) { + // return cart.map(Rock => ( + // Rock.name === selectedItem.name ? + // { ...Rock, quantityCart: Rock.quantityCart + 1 } : + // Rock + // )); + var tempCart = cart.map((Rock) => + Rock.name === selectedItem.name + ? { ...Rock, quantityCart: Rock.quantityCart + 1 } + : Rock + ); return tempCart; + } + // return [...cart, {...selectedItem, quantityCart: 1}]; + var tempCart = [...cart, { ...selectedItem, quantityCart: 1 }]; + return tempCart; }); }; const handleRemoveFromCart = (name: string) => { localStorage.setItem("cart", JSON.stringify(cartContent)); - setCartContent(cart => ( + setCartContent((cart) => cart.reduce((sum, p) => { - if (p.name === name) { - if (p.quantityCart === 1) { - return sum; - } - // return [...sum, {...p, quantityCart: p.quantityCart - 1}]; - var tempCart= [...sum, {...p, quantityCart:p.quantityCart - 1}] - return tempCart; - } else { - // return [...sum, p]; - var tempCart= [...sum, p]; - return tempCart; + if (p.name === name) { + if (p.quantityCart === 1) { + return sum; } + // return [...sum, {...p, quantityCart: p.quantityCart - 1}]; + var tempCart = [...sum, { ...p, quantityCart: p.quantityCart - 1 }]; + return tempCart; + } else { + // return [...sum, p]; + var tempCart = [...sum, p]; + return tempCart; + } }, [] as Rock[]) - )); + ); }; - - useEffect(()=>{ + useEffect(() => { refreshRockList(); - },[]); + }, []); return ( - setCartOpen(true)}/> - - - - } /> - } /> - }/> - }/> - }/> - }/> - - - - setCartOpen(false)}> - - + setCartOpen(true)} /> + + + } + /> + } /> + + } + /> + + } + /> + } /> + } /> + + + setCartOpen(false)} + > + + - - ); } diff --git a/webapp/src/code/Prefilters.tsx b/webapp/src/code/Prefilters.tsx new file mode 100644 index 0000000..82db98f --- /dev/null +++ b/webapp/src/code/Prefilters.tsx @@ -0,0 +1,2 @@ +var prefilters=["Metamórficas","Sedimentarias","Volcanicas"] +export default prefilters; \ No newline at end of file diff --git a/webapp/src/views/Login.tsx b/webapp/src/components/Login.tsx similarity index 100% rename from webapp/src/views/Login.tsx rename to webapp/src/components/Login.tsx diff --git a/webapp/src/components/PaymentPage.tsx b/webapp/src/components/PaymentPage.tsx index 7bb379a..48047bd 100644 --- a/webapp/src/components/PaymentPage.tsx +++ b/webapp/src/components/PaymentPage.tsx @@ -55,16 +55,15 @@ const PaymentPage: React.FC = ({cartContent, setNewCart}) => { } } return ( -
-

Tu Compra

+

Your BUY

-

Articulos

-
+

Articles

+
{ cartContent.map(Rock => (

{Rock.name}

@@ -92,6 +91,7 @@ const PaymentPage: React.FC = ({cartContent, setNewCart}) => {
-
) }; diff --git a/webapp/src/components/Product.tsx b/webapp/src/components/Product.tsx index 15a48e7..88683ae 100644 --- a/webapp/src/components/Product.tsx +++ b/webapp/src/components/Product.tsx @@ -14,17 +14,17 @@ function Product(product: ProductProps): JSX.Element {
{product.product!==null ? <> + {product.product.name.toString()}/ : <> } -
-
+ {product.product!==null ? <> - +

{"nombre: "+product.product.name}

{"precio: "+product.product.price+"€"}

{"tipo: "+ product.product.type}

{"mohs: "+ product.product.mohsHardness}

diff --git a/webapp/src/views/Register.tsx b/webapp/src/components/Register.tsx similarity index 96% rename from webapp/src/views/Register.tsx rename to webapp/src/components/Register.tsx index f54aac0..4f649d6 100644 --- a/webapp/src/views/Register.tsx +++ b/webapp/src/components/Register.tsx @@ -1,10 +1,7 @@ import React, { useState } from 'react'; import Button from '@mui/material/Button'; import TextField from '@mui/material/TextField'; -import Snackbar from '@mui/material/Snackbar'; -import Alert from '@mui/material/Alert'; import type { AlertColor } from '@mui/material/Alert'; -import Box from '@mui/material/Box'; import {useNavigate} from 'react-router-dom'; import { addUser } from '../api/api'; diff --git a/webapp/src/components/Showcase.tsx b/webapp/src/components/Showcase.tsx index 2f71969..421cd3e 100644 --- a/webapp/src/components/Showcase.tsx +++ b/webapp/src/components/Showcase.tsx @@ -21,7 +21,7 @@ function Showcase(prefilteredbox: RockListProps): JSX.Element { { prefilteredbox.rocks.map((_,product)=>{ if(prefilteredbox.rocks[product]!==undefined) - return ; diff --git a/webapp/src/components/Showcases.tsx b/webapp/src/components/Showcases.tsx index cc96a94..2699cc9 100644 --- a/webapp/src/components/Showcases.tsx +++ b/webapp/src/components/Showcases.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from "react"; import { getRocksFiery, getRocksMetamorphic, getRocksSedimentary } from "../api/api"; import { Rock } from "../shared/shareddtypes"; import Showcase from "./Showcase"; +import prefilters from "../code/Prefilters" type RockListProps = { handleAddToCart(r:Rock): void; @@ -16,7 +17,7 @@ function Showcases(prefilteredbox: RockListProps): JSX.Element { const refreshRockList = async () => { setPrefilteredRocks([...prefilteredRocks,await getRocksMetamorphic(),await getRocksSedimentary(),await getRocksFiery()]) - setNameOfFilters([...nameOfFilters,"Metamórifcas","Sedimentarias","Volcanicas"]) + setNameOfFilters(prefilters) } refreshRockList(); @@ -26,7 +27,7 @@ function Showcases(prefilteredbox: RockListProps): JSX.Element { {prefilteredRocks.map((_, element) => { - return (); + return (); })} diff --git a/webapp/src/components/tests/EmailForm.test.tsx b/webapp/src/components/tests/EmailForm.test.tsx deleted file mode 100644 index 2bda785..0000000 --- a/webapp/src/components/tests/EmailForm.test.tsx +++ /dev/null @@ -1,34 +0,0 @@ -/* eslint-disable testing-library/no-node-access */ -import { render, fireEvent, act } from "@testing-library/react"; -import EmailForm from "../EmailForm"; -import {User} from '../../shared/shareddtypes'; -import * as api from '../../api/api' - -jest.mock('../api/api'); - -test('check register fail', async () => { - jest.spyOn(api,'addUser').mockImplementation((user:User):Promise => Promise.resolve(false)) - await act(async () => { - const {container, getByText} = render({}}/>) - const inputName = container.querySelector('input[name="username"]')!; - const inputEmail = container.querySelector('input[name="email"]')!; - fireEvent.change(inputName, { target: { value: "Pablo" } }); - fireEvent.change(inputEmail, { target: { value: "gonzalezgpablo@uniovi.es" } }); - const button = getByText("Accept"); - fireEvent.click(button); - }); -}) - -test('check register ok', async () => { - - jest.spyOn(api,'addUser').mockImplementation((user:User):Promise => Promise.resolve(true)) - await act(async () => { - const {container, getByText} = render({}}/>) - const inputName = container.querySelector('input[name="username"]')!; - const inputEmail = container.querySelector('input[name="email"]')!; - fireEvent.change(inputName, { target: { value: "Pablo" } }); - fireEvent.change(inputEmail, { target: { value: "gonzalezgpablo@uniovi.es" } }); - const button = getByText("Accept"); - fireEvent.click(button); - }); -}) diff --git a/webapp/src/components/tests/Showcases.test.tsx b/webapp/src/components/tests/Showcases.test.tsx new file mode 100644 index 0000000..5707314 --- /dev/null +++ b/webapp/src/components/tests/Showcases.test.tsx @@ -0,0 +1,25 @@ +import React from 'react' +import {getByText, render,screen } from "@testing-library/react"; +import Showcase from '../Showcase'; +import { Rock } from '../../shared/shareddtypes'; + +test('Check that the showcases render properly', async () => { + const { container } = render(); + + expect(container).toHaveTextContent(/testtest/) + expect(container).toHaveTextContent(/122/) + expect(container).toHaveTextContent(/densidad/) + expect(container).toHaveTextContent(/asdf/) + +}); diff --git a/webapp/src/components/tests/UserList.test.tsx b/webapp/src/components/tests/UserList.test.tsx deleted file mode 100644 index 4808a44..0000000 --- a/webapp/src/components/tests/UserList.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react' -import { render } from "@testing-library/react"; -import UserList from "../UserList"; -import {User} from "../../shared/shareddtypes"; - -test('check that the list of users renders propertly', async () => { - const crypto = require('crypto'); - const pass = crypto.randomBytes(4).toString('utf8'); - const userList:User[] = [{name: 'Pablo', email: 'gonzalezgpablo@uniovi.es', dni: "10", password:pass,repeatPassword: pass}]; - const {getByText} = render(); - expect(getByText(userList[0].name)).toBeInTheDocument(); - expect(getByText(userList[0].email)).toBeInTheDocument(); - }); \ No newline at end of file diff --git a/webapp/src/components/tests/Welcome.test.tsx b/webapp/src/components/tests/Welcome.test.tsx new file mode 100644 index 0000000..49f8f44 --- /dev/null +++ b/webapp/src/components/tests/Welcome.test.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import {render , screen} from "@testing-library/react"; +import Welcome from "../Welcome"; +import { Rock } from '../../shared/shareddtypes'; + +test('check that everything is rendering propertly', async () => { + render(); + expect(screen.getByAltText("logo")).toBeInTheDocument(); +}); \ No newline at end of file diff --git a/webapp/src/css/App.css b/webapp/src/css/App.css index abb5b22..087dd98 100644 --- a/webapp/src/css/App.css +++ b/webapp/src/css/App.css @@ -2,6 +2,7 @@ .principal { margin-top: 7em; background-color: rgb(230, 237, 241); + } body { @@ -27,10 +28,12 @@ header { .btnBuy{ font-size: 8px !important; } - } @import "Catalog.css"; @import "Showcases.css"; @import "Product.css"; @import "LoginRegister.css"; -@import "SpinningLogo.css"; \ No newline at end of file +@import "SpinningLogo.css"; +@import "PaymentPage.css"; +@import "CartItem.css"; +@import "ShoppingCart.css"; \ No newline at end of file diff --git a/webapp/src/css/LoginRegister.css b/webapp/src/css/LoginRegister.css index 7885610..3d8b4e2 100644 --- a/webapp/src/css/LoginRegister.css +++ b/webapp/src/css/LoginRegister.css @@ -1,13 +1,2 @@ -#log { - border-radius: 1em; - background-color: rgb(241, 248, 255); - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - - padding: 1em; - width: 75%; - left: 11%; - margin-top: 3em; - } \ No newline at end of file diff --git a/webapp/src/css/PaymentPage.css b/webapp/src/css/PaymentPage.css index 5754374..8a112c6 100644 --- a/webapp/src/css/PaymentPage.css +++ b/webapp/src/css/PaymentPage.css @@ -1,90 +1,98 @@ -.paymentpage-payment{ - - padding: 5%; +.paymentpage-payment { + padding: 3%; } -#title-payment{ - grid-row-start: 1; - grid-row-end: 2; +#title-payment { + grid-row-start: 1; + grid-row-end: 2; - grid-column-start: 1; - grid-column-end: 2; + grid-column-start: 1; + grid-column-end: 2; - text-align:'left'; - - border-width: thin; - border-style: dotted; -} + text-align: "left"; -#info-payment{ - grid-row-start: 2; - grid-row-end: 3; + padding: 2%; - grid-column-start: 1; - grid-column-end: 2; + background-color: #f3af2f; +} - - display:grid; - grid-template-columns: repeat(1,1fr); - grid-template-rows: repeat(auto,1fr); +#info-payment { + grid-row-start: 2; + grid-row-end: 3; - text-align: center; - align-content: center; - - border-width: thin; - border-style: dotted; + grid-column-start: 1; + grid-column-end: 2; -} - #articles-payment{ - grid-row-start: 1; - grid-row-end: 2; - - grid-column-start: 1; - grid-column-end: 2; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(1, 1fr); - text-align: left; + text-align: center; + align-content: center; +} +#articles-payment { + grid-row-start: 1; + grid-row-end: 2; - padding-right: 50%; - } - #items-payment{ - display:grid; - grid-template-columns: repeat(3,1fr); - grid-template-rows: repeat(1,1fr); + grid-column-start: 1; + grid-column-end: 2; - - text-align: left; + text-align: left; - } + padding-right: 20%; +} +#articles-list-payment { + padding: 10%; + padding-left: 20%; + border-width: 1em; + border-style: solid; + border-color: #f3af2f; +} +#items-payment { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(1, 1fr); - #bill-payment{ - grid-row-start: 1; - grid-row-end: 2; - - grid-column-start: 2; - grid-column-end: 3; + text-align: left; +} - text-align: left; - } +#bill-payment { + grid-row-start: 1; + grid-row-end: 2; -#actionButtons-payment{ - grid-row-start: 3; - grid-row-end: 4; + grid-column-start: 2; + grid-column-end: 3; - grid-column-start: 1; - grid-column-end: 2; + text-align: left; + padding-right: 20%; } -#items-name-payment{ - text-align: left; - padding-right: 10%; - +#costList-payment { + padding: 10%; + padding-left: 20%; + border-width: 1em; + border-style: solid; + border-color: #f3af2f; } -#items-quantity-payment{ - text-align: center; - padding-right: 10%; -} -#items-total-payment{ - text-align: right; +#actionButtons-payment { + grid-row-start: 3; + grid-row-end: 4; -} \ No newline at end of file + grid-column-start: 1; + grid-column-end: 2; + padding: 1em; + + text-align: center; +} +#items-name-payment { + text-align: left; + padding-right: 10%; +} +#items-quantity-payment { + text-align: center; + padding-right: 10%; +} +#items-total-payment { + text-align: right; +} diff --git a/webapp/src/css/Product.css b/webapp/src/css/Product.css index 0fdfbd2..13a815b 100644 --- a/webapp/src/css/Product.css +++ b/webapp/src/css/Product.css @@ -5,10 +5,9 @@ height: 100%; } .infoProduct { - display: grid; - grid-template-columns: repeat(2,1fr); - grid-template-rows: repeat(2,1fr); - + display: flex; + margin-top: 1em; + flex-wrap: wrap; gap: 0.3em; } .imageProductContainer { @@ -20,24 +19,29 @@ border-radius: 1em; } + .imageProductContainer img{ border-radius: 1em; margin: 1em; } - +.infoProduct .datoProduct:first-of-type{ + width: 100%; +} .datoProduct { background-color: #ced9ee; - padding: 0.3em; + padding: 0.5em; border-radius: 0.3em; border: rgb(230, 237, 241) 0.15em solid; height: 80%; - display: flex; + width: 43%; + + display: flex; /* To make the text inside center vertically*/ justify-content: center; align-items: center; - + margin: 0; } .btnBuy{ position: relative; diff --git a/webapp/src/css/ShoppingCart.css b/webapp/src/css/ShoppingCart.css index 0611de4..7fcebf9 100644 --- a/webapp/src/css/ShoppingCart.css +++ b/webapp/src/css/ShoppingCart.css @@ -1,5 +1,5 @@ -shoppingCart{ +#shoppingCart{ display:grid; grid-template-columns: repeat(1,1fr); grid-template-rows: repeat(4,1fr); @@ -13,7 +13,7 @@ shoppingCart{ grid-column-start: 1; grid-column-end: 2; - background-color: gold; + background-color: #f3af2f; } #items-cart{ @@ -31,7 +31,7 @@ shoppingCart{ grid-column-start: 1; grid-column-end: 2; - background: gold; + background: #f3af2f; } #pay-button{ diff --git a/webapp/src/css/Showcases.css b/webapp/src/css/Showcases.css index fa69fca..4d52d27 100644 --- a/webapp/src/css/Showcases.css +++ b/webapp/src/css/Showcases.css @@ -1,12 +1,12 @@ .showcase { - border: rgb(230, 237, 241) 0.3em solid; + border: rgb(255, 255, 255) 0.3em solid; background-color: #d8e3f7; border-radius: 1em; display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); position: relative; - top: 5em; + margin-top: 7em; } #showcases { diff --git a/webapp/src/css/index.css b/webapp/src/css/index.css index 53b6d4c..b19a120 100644 --- a/webapp/src/css/index.css +++ b/webapp/src/css/index.css @@ -11,12 +11,5 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } -@media (min-width: 60em) { - /* two column layout only when enough room (relative to default text size) */ - div { display: flex; } - #main { - flex: 1; /* Main takes up all remaining space */ - order: 1; /* Place it after (to the right of) the navigation */ - min-width: 12em; /* Optimize main content area sizing */ - } -} + +@import "App.css"; \ No newline at end of file