Merge pull request #24 from petergeorgas/development

Preserve image preview aspect ratio
petergeorgas · Oct 29, 2021 · 299bbb3 · 299bbb3
2 parents 1391630 + 6c72158
commit 299bbb3
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 16 deletions.
diff --git a/src/App.css b/src/App.css
@@ -51,11 +51,21 @@
   border-radius: 12px;
 }
 
+.image-div {
+  display: flex;
+  width: 350px;
+  height: 220px;
+  justify-content: center;
+  align-items: center;
+}
+
 #uploaded-img {
+  max-width: 350px;
+  max-height: 220px;
+  border-radius: 12px;
   border-radius: 12px;
   border: 2px solid #97bef4;
   box-sizing: border-box;
-  border-radius: 12px;
   margin-bottom: 0;
 }
 

diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,5 @@
 import "./App.css";
-import image from "./image.svg";
+import image from "./assets/image.svg";
 import { useRef, useState, useCallback } from "react";
 import { initializeApp } from "firebase/app";
 import {
@@ -161,16 +161,10 @@ function App() {
                 </div>
               </div>
             ) : (
-              <div>
+              <div className="image-div">
                 <div {...getRootProps()}>
                   <input {...getInputProps()} />
-                  <img
-                    id="uploaded-img"
-                    src={file}
-                    width={350}
-                    height={220}
-                    alt="Uploaded image"
-                  />
+                  <img id="uploaded-img" src={file} alt="Uploaded image" />
                 </div>
               </div>
             )}

diff --git a/src/cloud_done.svg → src/assets/cloud_done.svg b/src/cloud_done.svg → src/assets/cloud_done.svg
diff --git a/src/content_copy.svg → src/assets/content_copy.svg b/src/content_copy.svg → src/assets/content_copy.svg
diff --git a/src/error.svg → src/assets/error.svg b/src/error.svg → src/assets/error.svg
diff --git a/src/image.svg → src/assets/image.svg b/src/image.svg → src/assets/image.svg
diff --git a/src/components/Snackbar.js b/src/components/Snackbar.js
@@ -1,7 +1,7 @@
 import React, { useState, forwardRef, useImperativeHandle } from "react";
 import "./Snackbar.css";
-import content_copy from "../content_copy.svg";
-import error from "../error.svg";
+import content_copy from "../assets/content_copy.svg";
+import error from "../assets/error.svg";
 
 const Snackbar = forwardRef((props, ref) => {
   const [showSnackbar, setShowSnackbar] = useState(false);

diff --git a/src/components/Success.js b/src/components/Success.js
@@ -1,6 +1,6 @@
 import React, { useRef } from "react";
 import "./Success.css";
-import cloud_done from "../cloud_done.svg";
+import cloud_done from "../assets/cloud_done.svg";
 import CopyToClipboard from "react-copy-to-clipboard";
 import Snackbar from "./Snackbar";
 
@@ -23,13 +23,12 @@ function Success(props) {
         <div className="flex-container-inner">
           <img src={cloud_done} className="success-icon" alt="success icon" />
           <h2 className="box-header">Upload successful.</h2>
-          <div>
+          <div className="image-div ">
             <img
               id="uploaded-img"
               src={imgUrl}
-              width={350}
-              height={220}
               alt="uploaded image from cloud"
+              style={{ marginBottom: "20px" }}
             />
           </div>
           <div className="link-box">