Add styled-component types and make styles more cleaner

fadihanna123 · Sep 16, 2024 · b04c4bb · b04c4bb
1 parent 74fbaeb
commit b04c4bb
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -95,6 +95,7 @@
     "@eslint/js": "^9.10.0",
     "@testing-library/react": "^16.0.1",
     "@types/node": "^22.5.5",
+    "@types/styled-components": "^5.1.34",
     "eslint-plugin-react": "^7.36.1",
     "react-test-renderer": "^18.3.1",
     "typescript-eslint": "^8.5.0",

diff --git a/src/containers/PhotoItem.tsx b/src/containers/PhotoItem.tsx
@@ -3,7 +3,7 @@ import { setImage } from '../redux/reducers/image';
 import { setToggler } from '../redux/reducers/toggler';
 import sal from 'sal.js';
 import { Loader } from '../ui';
-import { ImageCol, Modal, ModalContent } from '../styles';
+import { ImageCol, Modal, ModalContent, ImgItem, ModalImg } from '../styles';
 import { setMediaLoading } from '../redux/reducers';
 import useReduxConsts from '../hooks/useReduxConsts';
 
@@ -46,22 +46,20 @@ const PhotoItem: React.FC<{
   return (
     <ImageCol data-sal='zoom-in'>
       {item?.webformatURL && (
-        <img
+        <ImgItem
           aria-label={searchForm.query}
           src={item.webformatURL}
           alt={searchForm.query}
           onClick={() => toggleImagePreviewer(item, dispatch)}
           width='500'
           height='500'
           style={{
-            maxWidth: '100%',
-            height: '100%',
+            aspectRatio: '1 / 1',
             display: mediaLoading ? 'none' : 'block',
           }}
           onLoad={() => dispatch(setMediaLoading(false))}
         />
       )}
-
       {toggler && (
         <Modal
           className='modal'
@@ -70,13 +68,7 @@ const PhotoItem: React.FC<{
         >
           <ModalContent>
             {image && (
-              <img
-                width='500'
-                height='500'
-                style={{ maxWidth: '100%', height: '100%' }}
-                alt='preview'
-                src={image}
-              />
+              <ModalImg width='500' height='500' alt='preview' src={image} />
             )}
           </ModalContent>
         </Modal>

diff --git a/src/styles/listStyles.ts b/src/styles/listStyles.ts
@@ -1,5 +1,15 @@
 import styled from 'styled-components';
 
+export const ImgItem = styled.img`
+  max-width: 100%;
+  height: 100%;
+`;
+
+export const ModalImg = styled.img`
+  max-width: 100%;
+  height: 100%;
+`;
+
 export const NoData = styled.div`
   grid-column-start: 3;
   grid-column-end: 5;

diff --git a/src/styles/photoItemStyles.ts b/src/styles/photoItemStyles.ts
@@ -14,6 +14,8 @@ export const Modal = styled.div`
   top: 0;
   overflow: hidden;
   width: 100%;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.4);
 
   @media (max-width: 1020px) {
     padding: 10px;

diff --git a/yarn.lock b/yarn.lock
@@ -1386,7 +1386,7 @@
   dependencies:
     "@types/node" "*"
 
-"@types/hoist-non-react-statics@^3.3.0":
+"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0":
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
   integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
@@ -1490,6 +1490,15 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.3.tgz#6209321eb2c1712a7e7466422b8cb1fc0d9dd5d8"
   integrity sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==
 
+"@types/styled-components@^5.1.34":
+  version "5.1.34"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.34.tgz#4107df8ef8a7eaba4fa6b05f78f93fba4daf0300"
+  integrity sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==
+  dependencies:
+    "@types/hoist-non-react-statics" "*"
+    "@types/react" "*"
+    csstype "^3.0.2"
+
 "@types/stylis@4.2.5":
   version "4.2.5"
   resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.5.tgz#1daa6456f40959d06157698a653a9ab0a70281df"