fix(web): styling

* fix(earth-container): cors error in safari * fix(search-container): inconsistent width * fix(sighting-card): grid spacing
kylejb · Jan 28, 2022 · cbfc590 · cbfc590
1 parent 6282283
commit cbfc590
Show file tree

Hide file tree

Showing 14 changed files with 29 additions and 54 deletions.
diff --git a/web/public/earth-blue-marble.jpg b/web/public/earth-blue-marble.jpg
diff --git a/web/public/earth-topology.png b/web/public/earth-topology.png
diff --git a/web/public/night-sky.png b/web/public/night-sky.png
diff --git a/web/src/components/compass/Compass.tsx b/web/src/components/compass/Compass.tsx
@@ -2,7 +2,7 @@ import { drawViewingArea } from 'utils/drawViewingAreaOnCompass';
 
 const Compass = ({ entersSky, leavesSky }) => {
     return (
-        <svg width='200px' viewBox='0 0 608 608'>
+        <svg viewBox='0 0 608 608'>
             <g>
                 <line
                     x1='304'

diff --git a/web/src/components/credits/Credits.tsx b/web/src/components/credits/Credits.tsx
@@ -1,5 +1,5 @@
 const Credits = () => (
-    <div className='fixed bottom-6 right-6 z-10 font-basier text-white text-sm opacity-25'>
+    <div className='fixed bottom-6 right-8 z-10 font-basier text-white text-sm opacity-25'>
         Made by
         <span className='mx-1.5 my-0'>
             <a

diff --git a/web/src/components/faq/Faq.tsx b/web/src/components/faq/Faq.tsx
@@ -8,7 +8,7 @@ const Faq = () => {
     };
 
     const renderFaq = faqVisible ? (
-        <div className='w-72 z-10 fixed flex flex-col bottom-1/4 left-8 bg-zinc-900 opacity-75 text-white text-sm font-basier rounded-md p-2 mb-1'>
+        <div className='w-72 z-10 fixed flex flex-col bottom-1/4 left-8 bg-zinc-900 opacity-75 text-white text-sm font-basier rounded-md mb-1'>
             <div className='py-1.5 underline'>
                 <h2 className='text-center text-lg'>FAQ</h2>
             </div>
@@ -54,7 +54,7 @@ const Faq = () => {
         </div>
     ) : (
         <div
-            className='z-10 fixed bottom-1/4 left-6 rounded-md text-white bg-zinc-900 opacity-75 font-basier text-sm cursor-pointer p-2 m-1'
+            className='z-10 fixed bottom-1/4 left-8 rounded-md text-white bg-zinc-900 opacity-75 font-basier text-sm cursor-pointer p-2 mb-1'
             onClick={faqHelper}
         >
             <h2>FAQ &nbsp;»</h2>

diff --git a/web/src/components/instructions/Instructions.tsx b/web/src/components/instructions/Instructions.tsx
@@ -8,7 +8,7 @@ const Instructions = () => {
     };
 
     const renderInstructions = instructionsVisible ? (
-        <div className='w-72 z-10 fixed top-3/4 left-8 flex flex-col rounded-md text-white text-sm font-basier bg-zinc-900 opacity-75'>
+        <div className='w-72 z-10 fixed top-3/4 left-8 flex flex-col rounded-md text-white text-sm font-basier bg-zinc-900 opacity-75 mt-1'>
             <div className='py-1.5 underline'>
                 <h2 className='text-center text-lg'>Instructions</h2>
             </div>
@@ -25,7 +25,7 @@ const Instructions = () => {
         </div>
     ) : (
         <div
-            className='fixed z-10 top-3/4 left-6 rounded-md text-white bg-zinc-900 opacity-75 font-basier text-sm cursor-pointer m-1 p-2'
+            className='fixed z-10 top-3/4 left-8 rounded-md text-white bg-zinc-900 opacity-75 font-basier text-sm cursor-pointer p-2 mt-1'
             onClick={instructionsHelper}
         >
             <h2>Instructions &nbsp;»</h2>

diff --git a/web/src/components/search/search-bar.component.tsx b/web/src/components/search/search-bar.component.tsx
@@ -22,7 +22,7 @@ const SearchBar = ({ fetchGeoDataFromZip, currentUser }) => {
     return (
         <>
             <input
-                className='h-full p-4 font-basier text-gray-300 bg-stone-800 bg-opacity-50 border-neutral-400 outline-none border placeholder:text-gray-400 placeholder:text-xs focus:shadow-input tracking-search'
+                className='h-full w-full p-4 font-basier text-gray-300 bg-stone-800 bg-opacity-50 border-neutral-400 outline-none border placeholder:text-center placeholder:text-gray-400 placeholder:text-xs focus:shadow-input tracking-widest'
                 name='searchZipCode'
                 type='search'
                 placeholder='Enter ZIP Code'
@@ -33,8 +33,8 @@ const SearchBar = ({ fetchGeoDataFromZip, currentUser }) => {
             <input
                 ref={submitRef}
                 type='submit'
-                className='h-full w-32 font-basier text-sm bg-neutral-400 border-none rounded-r-md cursor-pointer hover:bg-stone-600 disabled:bg-stone-600 disabled:pointer-events-none tracking-search'
-                value='Search'
+                className='h-full w-full font-basier text-sm bg-neutral-400 border-none rounded-r-md cursor-pointer hover:bg-stone-600 disabled:bg-stone-600 disabled:pointer-events-none tracking-wider'
+                value='Find Sightings'
                 disabled={isUserSearching}
                 aria-disabled={isUserSearching}
                 onClick={() => {

diff --git a/web/src/components/sightingcard/SightingCard.tsx b/web/src/components/sightingcard/SightingCard.tsx
@@ -8,15 +8,14 @@ type SightingCardProps = {
     sightingData?: any;
 };
 
-// default
 const defaultProp = {
     date: 'DATE',
     time: 'TIME',
     duration: 'DURATION',
 };
 
 const baseStyle =
-    'grid grid-cols-8 grid-flow-row auto-rows-max gap-4 py-4 mx-4 text-gray-300 text-base hover:text-stone-50';
+    'grid grid-cols-7 grid-flow-row auto-rows-max items-center gap-4 py-4 mx-4 font-basier text-gray-300 text-base hover:text-stone-50';
 
 // TODO: Refactor SightingCard JSX with reusable components
 const SightingCard = ({
@@ -31,39 +30,23 @@ const SightingCard = ({
         }
         onClick={() => !header && selectSightingCard && selectSightingCard()} // TODO: refactor with appropriate type defs
     >
-        <div
-            // className={header ? 'w-36' : 'w-32'}
-            // className='hover:text-stone-50'
-            className={header ? 'ml-8 col-span-3' : 'col-span-3'}
-        >
-            {sightingData.date}
-        </div>
+        <div className={header ? 'indent-4 col-span-3' : 'col-span-3'}>{sightingData.date}</div>
         <div className='col-span-2'>{sightingData.time}</div>
         <div className='col-span-2'>
-            {/* <div className={header ? 'flex justify-center' : 'flex justify-between'}> */}
-            <div>{sightingData.duration}</div>
-            {/* TODO: refactor and cleanup */}
-            {/* {isSelected ? (
+            <span className='flex justify-between'>
+                {sightingData.duration}
+                {isSelected ? (
                     !header ? (
-                        <div className='text-xs w-3 mt-2'>▲</div>
-                        ) : null
-                        ) : !header ? (
-                            <div className='text-xs w-3 mt-1'>▼</div>
-                            ) : null} */}
-            {/* </div> */}
+                        <span className='text-xs mt-1'>▲</span>
+                    ) : null
+                ) : !header ? (
+                    <span className='text-xs mt-1'>▼</span>
+                ) : null}
+            </span>
         </div>
         {isSelected ? (
-            !header ? (
-                <div className='col-span-1 text-xs mt-1'>▲</div>
-            ) : null
-        ) : !header ? (
-            <div className='col-span-1 text-xs mt-1'>▼</div>
-        ) : null}
-        {isSelected ? (
-            // className='grid grid-cols-2 col-span-3 justify-evenly text-xs cursor-pointer mt-2 w-72'
-            // className='flex flex-col justify-center w-54'
-            <div className='grid grid-cols-4 place-self-start place-content-center text-xs cursor-pointer mt-2 w-72'>
-                <div className='col-span-2 mt-4'>
+            <>
+                <div className='col-span-3 text-sm'>
                     <div className='mb-1 underline decoration-1 decoration-solid'>Enters Sky</div>
                     <div className='mb-3'>
                         {sightingData.approachDir}: {sightingData.approachDeg} above horizon
@@ -77,13 +60,13 @@ const SightingCard = ({
                         {sightingData.departureDir}: {sightingData.departureDeg} above horizon
                     </div>
                 </div>
-                <div className='col-span-2'>
+                <div className='col-span-4'>
                     <Compass
                         entersSky={sightingData.approachDir}
                         leavesSky={sightingData.departureDir}
                     />
                 </div>
-            </div>
+            </>
         ) : null}
     </div>
 );

diff --git a/web/src/components/spacestation/SpaceStation.tsx b/web/src/components/spacestation/SpaceStation.tsx
@@ -5,7 +5,6 @@ const SpaceStation = () => {
     const [, setStationObj] = useState([] as any); // TODO: Remove type casting
 
     useEffect(() => {
-        // ISS Satellite ID is 25544 at this endpoint
         const findISS = async () => {
             const response = await fetch('https://api.wheretheiss.at/v1/satellites/25544');
             const data = await response.json();

diff --git a/web/src/components/splashpage/SplashPage.tsx b/web/src/components/splashpage/SplashPage.tsx
@@ -33,4 +33,3 @@ const SplashPage = ({ splashHider }) => {
 };
 
 export default SplashPage;
-// transition duration-150 ease-in-out
diff --git a/web/src/containers/EarthContainer/Earth.tsx b/web/src/containers/EarthContainer/Earth.tsx
@@ -12,7 +12,6 @@ const Earth = () => {
     const [isFirstLoad, setIsFirstLoad] = useState(true);
     const { value, status } = useSearchContext();
 
-    // Camera follows ISS on state change
     useEffect(() => {
         if (followISS && satelliteCollection.length && globeEl.current) {
             globeEl.current.controls().autoRotate = false;
@@ -42,7 +41,6 @@ const Earth = () => {
     }, [status, value]);
 
     useEffect(() => {
-        // ISS Satellite ID is 25544 at this endpoint
         const findISS = async () => {
             const response = await fetch('https://api.wheretheiss.at/v1/satellites/25544');
             const data = await response.json();
@@ -100,11 +98,10 @@ const Earth = () => {
                 ref={globeEl}
                 width={width}
                 height={height}
-                globeImageUrl='//unpkg.com/three-globe/example/img/earth-blue-marble.jpg'
-                bumpImageUrl='//unpkg.com/three-globe/example/img/earth-topology.png'
-                backgroundImageUrl='//unpkg.com/three-globe/example/img/night-sky.png'
+                globeImageUrl='/earth-blue-marble.jpg'
+                bumpImageUrl='/earth-topology.png'
+                backgroundImageUrl='/night-sky.png'
                 customLayerData={satelliteCollection}
-                // customLayerLabel='ISS' // -- Enabling this removes ISS hover label
                 customThreeObject={() =>
                     new THREE.Mesh(
                         new THREE.SphereBufferGeometry(8000 * 4e-4),
@@ -125,7 +122,7 @@ const Earth = () => {
                 labelsData={value}
                 labelLat={(d: any) => d.lat}
                 labelLng={(d: any) => d.lon}
-                labelText={() => ''} // optional label for searched sighting location
+                labelText={() => ''}
                 labelSize={1000 * 4e-4}
                 labelDotRadius={1500 * 4e-4}
                 labelColor={() => '#c43335'}

diff --git a/web/src/containers/SearchContainer/SearchContainer.tsx b/web/src/containers/SearchContainer/SearchContainer.tsx
@@ -4,7 +4,7 @@ import DropdownContainer from './Dropdown';
 import SearchResultsContainer from './SearchResults';
 
 const SearchContainer = ({ fetchGeoDataFromZip, currentUser, setCurrentUser }) => (
-    <div className='fixed right-12 top-14 z-10 h-12 w-[410px]'>
+    <div className='fixed right-8 top-12 z-10 h-12 w-[400px]'>
         <Search fetchGeoDataFromZip={fetchGeoDataFromZip} currentUser={currentUser}>
             <DropdownContainer currentUser={currentUser} setCurrentUser={setCurrentUser} />
         </Search>

diff --git a/web/tailwind.config.js b/web/tailwind.config.js
@@ -22,9 +22,6 @@ module.exports = {
                 basier: ['"Basier Circular"', 'sans-serif'],
                 garet: ['"Garet Heavy"', 'sans-serif'],
             },
-            letterSpacing: {
-                search: '.20em',
-            },
         },
     },
     plugins: [],