Merge pull request #1864 from OneCommunityGlobal/Olga_add_tool_page

Olga add tool page

src/components/BMDashboard/Tools/AddTool.css

@@ -0,0 +1,20 @@
+.add-tool-container{
+  width: 100%;
+  max-width: 800px;
+  margin: 1rem auto;
+  padding: 1rem 2rem;
+  border: 1px solid #ccc;
+  border-radius: 20px;
+}
+
+.add-tool-header h2{
+ font-size: clamp(1.5rem, 2.5vw, 2.5rem);
+ margin-left: 1rem;
+}
+
+
+@media screen and (max-width: 800px) {
+  .add-tool-container {
+    width: 95%;
+  }
+}

src/components/BMDashboard/Tools/AddTool.jsx

@@ -0,0 +1,13 @@
+import AddToolForm from './AddToolForm';
+import './AddTool.css';
+
+export default function AddTool() {
+  return (
+    <main className="add-tool-container">
+      <header className="add-tool-header">
+        <h2>ADD TYPE: TOOL</h2>
+      </header>
+      <AddToolForm />
+    </main>
+  );
+}

src/components/BMDashboard/Tools/AddToolForm.css

@@ -0,0 +1,58 @@
+.add-tool-form{
+  width: 100%;
+}
+
+.add-tool-form Label{
+font-size: .8em;
+}
+
+.add-tool-flex-group{
+  display: flex;  
+  gap: 2rem;
+}
+
+.add-tool-buttons{
+  display: flex;
+  gap: 1rem;
+  margin: 1rem auto 2rem;
+}
+
+.add-tool-buttons button{
+  width: 50%;
+}
+
+.add-tool-total-price{
+  display: flex;  
+  border-radius: 10px;
+  line-height: 3rem;
+  font-weight: bolder;
+  background-color: #f5e6e6;
+  padding-left: 1em;
+}
+
+.add-tool-total-price div{
+  width: 50%;
+}
+
+.total-price-calculated{
+  text-align: end;
+  padding-right: 1em;
+}
+
+.file-preview-container{
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  width: 100%;
+  margin-top: 1rem;
+}
+
+@media screen and (max-width: 640px) {
+  .add-tool-flex-group {
+    display: block;
+  }
+
+  .file-preview-container{
+    display: block;
+  }
+}