Skip to content

Commit

Permalink
updated styling given azure update
Browse files Browse the repository at this point in the history
  • Loading branch information
spoonfork0 authored and spoonfork0 committed Apr 14, 2023
1 parent 3897d43 commit f6fc792
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 38 deletions.
25 changes: 12 additions & 13 deletions client/components/Remote.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,10 @@ const Remote = (props) => {
return (
<div>
<div className="relative z-0 w-full h-full mb-6 group">
<div class="grid grid-cols-3 gap-2">
<h1 class="mx-auto text-sm flex items-center font-mono">
<div class="grid grid-cols-1 gap-2 items-center">
<div class="mx-auto text-sm flex items-center font-mono">
{props.remoteType.charAt(0).toUpperCase() + props.remoteType.slice(1)}: {props.displayName}
</h1>
</div>
{/* <div>
<img
class={`flex items-center mx-auto object-scale-down h-8 w-8 ${
Expand All @@ -73,7 +73,7 @@ const Remote = (props) => {
<div className="relative z-0 w-full h-full mb-6 group">
<input
type="key"
className={remote.errorField === 'accessId' || (remote.name === 'azureblob' && remote.errorMessage) ? wrongInputClass : correctInputClass}
className={remote.errorMessage ? wrongInputClass : correctInputClass}
placeholder=" "
required
name="accessId"
Expand All @@ -85,7 +85,7 @@ const Remote = (props) => {
></input>
<label
htmlFor={`${remoteType}AccessId`}
className="peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
className={`${remote.errorMessage ? 'text-red-600 peer-focus:text-red-600' : 'peer-focus:text-blue-600'} peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6`}
>
{remote.name === 'azureblob' ? 'Account ID' : 'Access ID'}
{remote.accessId ? <>{' \u2705'}</> : <></>}
Expand All @@ -94,7 +94,7 @@ const Remote = (props) => {

<div className="block relative z-0 w-full h-full mb-6 group">
<input
className={remote.errorField === 'secretKey' || (remote.name === 'azureblob' && remote.errorMessage) ? wrongInputClass : correctInputClass}
className={remote.errorMessage ? wrongInputClass : correctInputClass}
placeholder=" "
required
type="key"
Expand All @@ -108,7 +108,7 @@ const Remote = (props) => {

<label
htmlFor="secretKey"
className="peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
className={`${remote.errorMessage ? 'text-red-600 peer-focus:text-red-600' : 'peer-focus:text-blue-600'} peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6`}
>
{remote.name === 'azureblob' ? 'Access Key' : 'Secret Key'}
{remote.secretKey ? <>{' \u2705'}</> : <></>}
Expand All @@ -118,8 +118,7 @@ const Remote = (props) => {
{remote.name === 'Cloudflare' && (
<div className="relative z-0 w-full h-full mb-6 group">
<input
className="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-800 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
placeholder=" "
className={remote.errorMessage ? wrongInputClass : correctInputClass}placeholder=" "
required
type="id"
id="accountId"
Expand All @@ -135,9 +134,9 @@ const Remote = (props) => {
></input>
<label
htmlFor="accountId"
className="peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
>
Account ID {remote.accountId.length > 1 && <>{'\u2705'}</>}
className={`${remote.errorMessage ? 'text-red-600 peer-focus:text-red-600' : 'peer-focus:text-blue-600'} peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6`}
>
Account ID {remote.accountId.length===32 && <>{'\u2705'}</>}
</label>
</div>
)}
Expand All @@ -150,7 +149,7 @@ const Remote = (props) => {
</div>
)}

{remote.selectedBucket && remoteType === 'destination' ? <StartMigrationButton></StartMigrationButton> : null }
{origin.selectedBucket && destination.selectedBucket && remoteType === 'destination' ? <StartMigrationButton></StartMigrationButton> : null }

</div>
);
Expand Down
37 changes: 18 additions & 19 deletions client/components/RemoteContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,37 +9,36 @@ export const RemoteContainer = (props) => {
return (
<>






<div className="grid grid-rows-1 grid-cols-2 mx-32 my-16 p-6">
<div className="mx-20 my-8">
{!origin.name ? (
<RemoteSelection source={'Origin'}></RemoteSelection>
) : (
<Remote
remoteType={'origin'}
accessIdHandler={accessIdHandler}
secretKeyHandler={secretKeyHandler}
displayName={origin.displayName}
></Remote>

<Remote
remoteType={'origin'}
accessIdHandler={accessIdHandler}
secretKeyHandler={secretKeyHandler}
displayName={origin.displayName}
></Remote>
)}
</div>


<div className="mx-20 my-8">
{!destination.name ? (
<RemoteSelection source={'Destinaton'}></RemoteSelection>
<RemoteSelection source={'Destination'}></RemoteSelection>
) : (
<Remote
remoteType={'destination'}
accessIdHandler={accessIdHandler}
secretKeyHandler={secretKeyHandler}
displayName={destination.displayName}
/>

<Remote
remoteType={'destination'}
accessIdHandler={accessIdHandler}
secretKeyHandler={secretKeyHandler}
displayName={destination.displayName}
/>

)}
</div>
</div>
</div>
</>
);
Expand Down
17 changes: 11 additions & 6 deletions client/components/RemoteSelection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ 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'

Expand All @@ -23,12 +24,16 @@ const RemoteSelection = (props) => {
}

return (
<>
<h1>{props.source}</h1>
<button typeof='button' onClick={changeSourceHandler}><img id='AWS' src={awsIcon} alt='aws'></img>AWS</button>
<button typeof='button' onClick={changeSourceHandler}><img id='Cloudflare' src={cloudflareIcon} alt='cloudflare'></img>Cloudflare</button>
<button typeof='button' onClick={changeSourceHandler}><img id='azureblob' src={awsIcon} alt='azure'></img>MS Azure</button>
</>
<>
<div class='grid grid-rows-5 items-center px-10'>
<div class='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}><img class='flex items-center mx-auto object-scale-down h-24 w-24' id='AWS' src={awsIcon} alt='aws'/>AWS</button>
<button class='p-2' typeof='button' onClick={changeSourceHandler}><img class='flex items-center mx-auto object-scale-down h-24 w-24' id='Cloudflare' src={cloudflareIcon} alt='cloudflare'/>Cloudflare</button>
<button class='p-2' typeof='button' onClick={changeSourceHandler}><img class='flex items-center mx-auto object-scale-down h-24 w-24' id='azureblob' src={azureIcon} alt='azure'/>MS Azure</button>
</div>
</div>
</>

)
};
Expand Down
Binary file added client/public/azure.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit f6fc792

Please sign in to comment.