Fixed CSS & added button hover

oslabs-beta · Apr 14, 2023 · 230d6f8 · 230d6f8
1 parent 2ced56a
commit 230d6f8
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 40 deletions.
diff --git a/client/App.js b/client/App.js
@@ -1,13 +1,13 @@
-import React, { useEffect } from "react";
-import "./app.css";
-import { useDispatch, useSelector } from "react-redux";
-import { RemoteContainer } from "./components/RemoteContainer";
-import Overlay from "./components/Overlay";
-import { socket } from "./socket";
+import React, { useEffect } from 'react';
+import './app.css';
+import { useDispatch, useSelector } from 'react-redux';
+import { RemoteContainer } from './components/RemoteContainer';
+import Overlay from './components/Overlay';
+import { socket } from './socket';
 import {
  updateDataTransferProgressPercent,
- updateSocketConnectivity,
-} from "./slice";
+ updateSocketConnectivity
+} from './slice';
 //import styles if necessary
 //may need to import functions from slices here
 
@@ -28,24 +28,24 @@ const App = () => {
 
  function onDataTransfer(value) {
  //Don't update value if it isn't a valid increase.
- if (value === "") return;
+ if (value === '') return;
  dispatch(updateDataTransferProgressPercent(value));
  }
 
- socket.on("connect", onConnect);
- socket.on("disconnect", onDisconnect);
- socket.on("data transfer", onDataTransfer);
+ socket.on('connect', onConnect);
+ socket.on('disconnect', onDisconnect);
+ socket.on('data transfer', onDataTransfer);
 
  return () => {
- socket.off("connect", onConnect);
- socket.off("disconnect", onDisconnect);
- socket.off("data transfer", onDataTransfer);
+ socket.off('connect', onConnect);
+ socket.off('disconnect', onDisconnect);
+ socket.off('data transfer', onDataTransfer);
  };
  }, []);
 
  return (
- <>
- <div className="nav flex items-center justify-between mr-36 ml-20 p-6 text-xl ">
+ <div className="bg-gradient-to-br from-cyan-100 to-stone-200 !h-screen">
+ <div className="nav flex items-center justify-between mr-36 ml-20 p-6 text-xl">
  <div>CloudShift</div>
  <div>
  <a
@@ -58,7 +58,7 @@ const App = () => {
  </div>
  <RemoteContainer></RemoteContainer>
  {isMigrating && <Overlay></Overlay>}
- </>
+ </div>
  );
 };
 

diff --git a/client/components/RemoteSelection.js b/client/components/RemoteSelection.js
@@ -1,20 +1,20 @@
-import React from "react";
-import { useDispatch } from "react-redux";
+import React from 'react';
+import { useDispatch } from 'react-redux';
 
-import awsIcon from "../public/aws_edited.png";
-import azureIcon from "../public/azure.png";
-import cloudflareIcon from "../public/cloudflare_edited.png";
-import { updateRemoteName } from "../slice";
+import awsIcon from '../public/aws_edited.png';
+import azureIcon from '../public/azure.png';
+import cloudflareIcon from '../public/cloudflare_edited.png';
+import { updateRemoteName } from '../slice';
 
 const RemoteSelection = (props) => {
  const dispatch = useDispatch();
  const { source } = props;
 
  const changeSourceHandler = (e) => {
  const displayNames = {
- azureblob: "Microsoft Storage Container",
- Cloudflare: "Cloudflare R2",
- AWS: "Amazon S3",
+ azureblob: 'Microsoft Storage Container',
+ Cloudflare: 'Cloudflare R2',
+ AWS: 'Amazon S3'
  };
 
  const name = e.target.id;
@@ -25,37 +25,55 @@ const RemoteSelection = (props) => {
 
  return (
  <>
- <div class="grid grid-rows-5 items-center px-10">
- <div class="text-center text-base font-mono row-span-1">
+ <div className="grid grid-rows-5 items-center px-10">
+ <div className="text-center text-base font-mono row-span-1">
  {props.source}
  </div>
- <div class="text-base flex justify-center align-top row-span-4">
- <button class="p-2" typeof="button" onClick={changeSourceHandler}>
+ <div className="text-base flex justify-center align-top row-span-4">
+ <button
+ className="p-2 group"
+ typeof="button"
+ onClick={changeSourceHandler}
+ >
  <img
- class="flex items-center mx-auto object-scale-down h-24 w-24"
+ className="flex items-center mx-auto object-scale-down h-24 w-24"
  id="AWS"
  src={awsIcon}
  alt="aws"
  />
- AWS
+ <span className="group-hover:underline underline-offset-8">
+ AWS
+ </span>
  </button>
- <button class="p-2" typeof="button" onClick={changeSourceHandler}>
+ <button
+ className="p-2 group"
+ typeof="button"
+ onClick={changeSourceHandler}
+ >
  <img
- class="flex items-center mx-auto object-scale-down h-24 w-24"
+ className="flex items-center mx-auto object-scale-down h-24 w-24"
  id="Cloudflare"
  src={cloudflareIcon}
  alt="cloudflare"
  />
- Cloudflare
+ <span className="group-hover:underline underline-offset-8">
+ Cloudflare
+ </span>
  </button>
- <button class="p-2" typeof="button" onClick={changeSourceHandler}>
+ <button
+ className="p-2 group"
+ typeof="button"
+ onClick={changeSourceHandler}
+ >
  <img
- class="flex items-center mx-auto object-scale-down h-24 w-24"
+ className="flex items-center mx-auto object-scale-down h-24 w-24"
  id="azureblob"
  src={azureIcon}
  alt="azure"
  />
- MS Azure
+ <span className="group-hover:underline underline-offset-8">
+ MS Azure
+ </span>
  </button>
  </div>
  </div>

diff --git a/client/public/index.html b/client/public/index.html
@@ -8,7 +8,7 @@
  <title>CloudShift</title>
  </head>
 
- <body class="bg-gradient-to-br from-cyan-100 to-stone-200 !h-screen">
+ <body>
  <style>
  input:-webkit-autofill,
  input:-webkit-autofill:hover,