From f5716aa8cb940b1812bd9bc670f2a0dce52ac8af Mon Sep 17 00:00:00 2001
From: rubenolander <rubenolander@gmail.com>
Date: Fri, 20 Oct 2023 17:54:15 +0200
Subject: [PATCH] Styling of react calculator

For the project author to see if it's something to keep.
---
 react-calculator/src/App.css               | 44 ++++++++++++++--------
 react-calculator/src/components/Layout.tsx |  9 ++---
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/react-calculator/src/App.css b/react-calculator/src/App.css
index 8a6d508..c1ff2f5 100644
--- a/react-calculator/src/App.css
+++ b/react-calculator/src/App.css
@@ -1,5 +1,10 @@
 .App {
   text-align: center;
+  margin-top: 10rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .App-logo {
@@ -37,12 +42,33 @@
   }
 }
 
+.calculator-container {
+  background-color: #cecece; 
+  border-radius:5%;
+  width: 35vh;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.display-container {
+  width: 80%;
+}
+
+.display-container p {
+  background-color: #fffbe4;
+  height: 3rem;
+  font-size: 2rem;
+}
+
 .buttons-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 50px;
-  border: 2px solid black;
-  margin: 0rem 5rem;
+  padding: 1rem;
+  border: 1px solid black;
+  border-radius: 5%;
   gap: 5px;
 }
 
@@ -52,18 +78,4 @@
 
 .equal-button {
   grid-row: span 2;
-}
-
-/* Display */
-
-/* .display-container {
-  color: white;
-  border: 2px solid green;
-} */
-
-.display-container p {
-  border: 2px solid blue;
-  height: 1.5rem;
-  margin: 0rem 5rem; 
-  margin-bottom: 1rem;
 }
\ No newline at end of file
diff --git a/react-calculator/src/components/Layout.tsx b/react-calculator/src/components/Layout.tsx
index 5568bf2..de04943 100644
--- a/react-calculator/src/components/Layout.tsx
+++ b/react-calculator/src/components/Layout.tsx
@@ -1,13 +1,12 @@
 import { ReactNode } from "react";
 
 interface LayoutProps {
-    children: ReactNode,
-    className?: string
-}
+    children: ReactNode
+  }
 
-const Layout = ({children, className=""}: LayoutProps) => {
+const Layout = ({children}: LayoutProps) => {
     return (
-      <div className={`${className}`} style={{border:'2px solid blue', padding: '1rem 0rem', margin:'0rem 25rem'}}>
+      <div className="calculator-container">
           {children}
       </div>
     )