Skip to content

Commit f12013d

Browse files
emma-vargasemma-vargas
authored
Merge pull request #29 from oslabs-beta/yihe/modals-display
Add Table fixed
2 parents e0a5e72 + 77cc26a commit f12013d

File tree

5 files changed

+46
-40
lines changed

5 files changed

+46
-40
lines changed

‎src/components/DBDisplay/FeatureTab.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import axios, { AxiosResponse } from 'axios';
44
import { NavLink, useNavigate } from 'react-router-dom';
55
import { useNavStore } from '../../store/navStore';
66

7-
const linkbtn = 'mt-4 inline-block lg:mt-0 text-blue-200 hover:text-white mr-4';
8-
97
// Functions imported:
108
import parseSql from '../../parse';
119

‎src/components/Modals/ColumnInput.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ function ColumnInput({
5757
};
5858

5959
return (
60-
<div className="column-input">
60+
<div className="column-input mb-4 flex gap-1">
6161
<div>
6262
<label
6363
className=" text-center text-slate-900 dark:text-[#f8f4eb]"
@@ -114,7 +114,7 @@ function ColumnInput({
114114

115115
<div>
116116
<label
117-
className=" text-center text-slate-900 dark:text-[#f8f4eb]"
117+
className="w-[100px] text-center text-slate-900 dark:text-[#f8f4eb]"
118118
htmlFor={`column-${index}-default-val`}
119119
>
120120
Default Value
@@ -132,7 +132,7 @@ function ColumnInput({
132132
{mode === 'table' && (
133133
<div>
134134
<label
135-
className=" text-center text-slate-900 dark:text-[#f8f4eb]"
135+
className="w-[90px] text-center text-slate-900 dark:text-[#f8f4eb]"
136136
htmlFor={`column-${index}-primary`}
137137
>
138138
Primary Key

‎src/components/Modals/InputModal.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -192,14 +192,14 @@ export default function InputModal({
192192
const isSuccessful: boolean = handleSubmit();
193193
if (isSuccessful) closeInputModal();
194194
}}
195-
className="modal-content rounded-md bg-gradient-to-b from-[#f8f4eb] dark:from-sky-700 to-transparent bg-opacity-80 shadow-[0px_5px_10px_rgba(0,0,0,0.4)] dark:bg-slate-800 dark:shadow-[0px_5px_10px_#1e293b]"
195+
className="modal-content w-full max-w-[600px] min-w-[400px] rounded-md bg-gradient-to-b from-[#f8f4eb] dark:from-sky-700 to-transparent bg-opacity-80 shadow-[0px_5px_10px_rgba(0,0,0,0.4)] dark:bg-slate-800 dark:shadow-[0px_5px_10px_#1e293b]"
196196
>
197197
<div className="table-name">
198198
{mode === 'table' ? (
199199
<>
200200
<label
201201
htmlFor="table-modal-name"
202-
className=" text-slate-900 dark:text-[#f8f4eb]"
202+
className="w-[100px] text-slate-900 dark:text-[#f8f4eb]"
203203
>
204204
Table Name:
205205
</label>

‎src/components/Navbar.tsx

Lines changed: 41 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -25,23 +25,36 @@ import logo10 from '../assets/newLogoWhite_color10.png';
2525
import logo11 from '../assets/newLogoWhite_color11.png';
2626
import logo12 from '../assets/newLogoWhite_color12.png';
2727

28-
const linkbtn = 'mt-4 inline-block lg:mt-0 text-white hover:text-white mr-4';
28+
const linkbtn = 'inline-block text-white hover:text-white mr-4';
2929

3030
function Navbar() {
3131
// dbSpy 8.0: removed theme state and add state for the animated logo
3232
const [currentLogo, setCurrentLogo] = useState<string>(logo);
3333
const toggleClicked = useNavStore((state) => state.toggleClicked);
34-
const toggleNav = useNavStore((state):any => state.toggleNav);
34+
const toggleNav = useNavStore((state): any => state.toggleNav);
3535
// toggleNav();
3636
//STATE DECLARATION (dbSpy3.0)
3737
const { user } = useCredentialsStore((state): any => state);
3838
//END: STATE DECLARATION
3939

4040
// dbSpy 8.0: made logo animation sparkling in the navbar
4141
const logoImgArr: string[] = [
42-
logo1, logo2, logo3, logo4, logo5, logo6,
43-
logo7, logo8, logo9, logo10, logo11, logo12,
44-
logo12, logo12, logo12, logo
42+
logo1,
43+
logo2,
44+
logo3,
45+
logo4,
46+
logo5,
47+
logo6,
48+
logo7,
49+
logo8,
50+
logo9,
51+
logo10,
52+
logo11,
53+
logo12,
54+
logo12,
55+
logo12,
56+
logo12,
57+
logo,
4558
];
4659
// Effect to cycle through images automatically
4760
useEffect(() => {
@@ -56,51 +69,53 @@ function Navbar() {
5669

5770
return (
5871
<>
59-
<nav className="fixed top-0 flex w-full flex-wrap items-center justify-between bg-gradient-to-b from-sky-700 to-transparent bg-opacity-80 p-3 z-50 backdrop-blur-md">
60-
61-
<div className="navItems text-base">
72+
<nav className="fixed top-0 z-50 flex w-full flex-wrap items-center justify-between bg-opacity-80 bg-gradient-to-b from-sky-700 to-transparent p-3 backdrop-blur-md">
73+
<div className="navItems flex min-w-0 items-center gap-3">
6274
{/* dbSpy 8.0: added toggle button to control FeatureTab */}
6375
<img
64-
className="pointer-events-auto mb-1 mt-1 inline-block h-[40px] w-[50px] pr-3 filter hover:cursor-pointer hover:translate-y-[-2px] transition-transform duration-200"
76+
className="w-[25px] shrink-0 filter transition-transform duration-200 hover:translate-y-[-2px] hover:cursor-pointer"
6577
src={toggleClicked ? sidebarClose : sidebarOpen}
6678
alt="Toggle Sidebar"
6779
onClick={toggleNav}
6880
/>
6981

7082
{/* Sparkling logo */}
71-
<img className="mr-5 inline-block h-[45] fill-current" src={currentLogo} alt="Logo"/>
83+
<img className="mr-3 h-[45px] w-auto shrink-0" src={currentLogo} alt="Logo" />
7284

73-
<NavLink to="/" className={linkbtn}>
74-
Home
75-
</NavLink>
76-
<NavLink to="/display" data-testid="navbar-display" className={linkbtn}>
77-
Display
78-
</NavLink>
85+
<div className="flex min-w-0 items-center gap-2 overflow-hidden whitespace-nowrap">
86+
<NavLink to="/" className={`${linkbtn} flex items-center`}>
87+
Home
88+
</NavLink>
89+
<NavLink to="/display" data-testid="navbar-display" className={`${linkbtn} flex items-center`}>
90+
Display
91+
</NavLink>
92+
</div>
7993
</div>
80-
<div>
94+
<div className="flex items-center justify-end gap-2">
8195
{user ? (
8296
<>
83-
{/* inline-block: behave like an inline element but allows width and height modifications */}
84-
{/* pt: padding to top, dark:text-white: change text color to white in dark mode */}
85-
{/* lg: large screens, mt-0: margin-top: 0, on lg mode */}
86-
<span className="mt-4 inline-block mx-auto text-blue-200 lg:mt-0">
97+
{/* inline-block: behave like an inline element but allows width and height modifications */}
98+
{/* pt: padding to top, dark:text-white: change text color to white in dark mode */}
99+
{/* lg: large screens, mt-0: margin-top: 0, on lg mode */}
100+
<span className="text-blue-200">
87101
{user.full_name}
88102
</span>
89103
{/* ml: margin left, mr: margin right, rounded-full: make the image circular, dark:invert: invert color in dark mode */}
90104
<img
91-
className="ml-2 mr-2 inline-block h-[25] rounded-full invert"
105+
className="h-[25px] w-[25px] rounded-full invert"
92106
src={default_pfp}
93107
/>
94108
</>
95109
) : (
96-
<div className="flex justify-end">
110+
<>
97111
<NavLink
98112
to="/login"
99-
className="text-white text-base font-bold leading-normal">
113+
className="text-white text-base font-bold"
114+
>
100115
Login
101116
</NavLink>
102-
<img className="mr-3 ml-3 inline-block h-[20] invert" src={login} />
103-
</div>
117+
<img className="h-[20px] w-[20px] invert" src={login} />
118+
</>
104119
)}
105120
</div>
106121
</nav>

‎src/pages/DBDisplay.tsx

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,6 @@
22
// React & React Router & React Query Modules;
33
import React, { useRef, useEffect, useState } from 'react';
44

5-
import { NavLink } from 'react-router-dom';
6-
import logo from '../assets/newLogoWhite.png';
7-
import login from '../assets/right-to-bracket-solid.svg';
8-
import default_pfp from '../assets/default_pfp.svg';
9-
10-
//-- this linkbtn isn't being used in this file, delete?
11-
const linkbtn = 'mt-4 inline-block lg:mt-0 text-blue-200 hover:text-white mr-4';
125
// Dashboard Components Imported;
136
import Sidebar from '../components/DBDisplay/Sidebar';
147
import FeatureTab from '../components/DBDisplay/FeatureTab';

0 commit comments

Comments
 (0)