Skip to content

Commit

Permalink
Merge pull request #66 from chriswebb09/dev-branch
Browse files Browse the repository at this point in the history 
Change UI Color Scheme
  • Loading branch information
@chriswebb09
chriswebb09 authored Jan 2, 2024
2 parents 62bcda5 + 49e91ec commit 2ec88dc
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 44 deletions.
79 changes: 51 additions & 28 deletions DirectReport/browserview/static/js/account/account_components.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,64 +4,87 @@ const { useState, useEffect } = React;
const AccountUserInfo = (userData, reportData) => {
return (
<div className="lg:col-span-3 md:col-span-2 my-0 sm:col-span-1 sm:col-span-3 justify-center">
<div className="bg-blue-500 py-5 px-12 shadow-[1.0px_1.0px_5.0px_0.0px_rgba(0,0,0,0.58)] rounded-3xl">
<div className="flex h-30 flex-col self-center bg-blue-200 py-12 px-2 my-6 shadow-[1.0px_1.0px_5.0px_0.0px_rgba(0,0,0,0.58)] rounded-3xl border-solid border-2 border-gray-200">
<div className="bg-blue-600 py-5 px-12 shadow-[1.0px_1.0px_5.0px_0.0px_rgba(0,0,0,0.58)] rounded-3xl">
<div className="flex h-30 flex-col self-center py-10 px-5 my-6 rounded-3xl">
<div className="lg:col-span-1 md:col-span-2 sm:col-span-3 mx-10 pb-8 pt-12 px-12 bg-blue-50 rounded-t-3xl shadow-[1.0px_1.0px_7.0px_0.0px_rgba(0,0,0,0.58)] border-solid border-2 border-gray-200">
<div className="grid grid-flow-col gap-10">
<div className="col-span-2 bg-gray-200 shadow-[1.0px_1.0px_7.0px_0.0px_rgba(0,0,0,0.58)] rounded-3xl py-8 px-5 border-solid border-2 border-gray-400">
<div className="grid grid-flow-col gap-2">
<div className="col-span-2 bg-gray-200 shadow-[1.0px_1.0px_7.0px_0.0px_rgba(0,0,0,0.58)] rounded-3xl py-7 px-2 border-solid border-2 border-gray-400">
<p className="text-justify ml-10 pt-1 text-md font-mono tracking-wide text-sky-800">
<span className="ml-5 font-black">FULL NAME: </span> {userData.name}
<span className="ml-10 font-black">FULL NAME: </span> {userData.name}
</p>
<p className="text-justify ml-10 pt-1 text-md font-mono tracking-wide text-sky-800">
<span className="ml-5 font-black font-mono">EMAIL ADDRESS:</span> {userData.userid}
<span className="ml-10 font-black font-mono">EMAIL ADDRESS:</span> {userData.userid}
</p>
<p className="text-justify ml-10 pt-1 text-md font-mono tracking-wide text-sky-800">
<span className="ml-5 font-black font-mono">USER NAME: </span> {userData.username}
<span className="ml-10 font-black font-mono">USER NAME: </span> {userData.username}
</p>
<div className="rounded-2xl flex items-center justify-center">
<button className="bg-sky-500 hover:bg-slate-100 self-center text-white font-mono tracking-wide shadow-[1.5px_2px_1.0px_0.5px_rgba(0,0,0,0.48)] hover:white hover:text-blue-500 hover:border-gray-200 text-sm font-semibold py-2 px-30 rounded-3xl mt-10" type="button">
<button className="bg-blue-600 hover:bg-slate-100 self-center text-white font-mono tracking-wide shadow-[1.5px_2px_1.0px_0.5px_rgba(0,0,0,0.48)] hover:white hover:text-blue-500 hover:border-gray-200 text-sm font-semibold py-2 px-30 rounded-3xl mt-10" type="button">
<a className="px-10 py-2 tracking-wide" href='/dashboard/edit'>EDIT PROFILE</a>
</button>
</div>
</div>
<div className="col-span-2 bg-gray-200 shadow-[1.0px_1.0px_7.0px_0.0px_rgba(0,0,0,0.58)] rounded-3xl py-8 px-5 border-solid border-2 border-gray-400">
<p className="text-justify ml-20 pt-1 text-md font-mono tracking-wide text-sky-800">
<div className="col-span-1">
</div>
<div
className="col-span-2 bg-gray-200 shadow-[1.0px_1.0px_7.0px_0.0px_rgba(0,0,0,0.58)] rounded-3xl py-7 px-2 border-solid border-2 border-gray-400">
<p className="text-justify ml-10 pt-1 text-md font-mono tracking-wide text-sky-800">
<span className="ml-10 font-black font-mono">NUMBER OF REPORTS SAVED: </span>
{reportData.length}
</p>
<p className="text-justify ml-20 pt-1 text-md font-mono tracking-wide text-sky-800">
<span className="ml-10 font-black font-mono">LAST REPORT: </span>
DEC 12, 2021
</p>
<p className="text-justify ml-20 pt-1 text-md font-mono tracking-wide text-sky-800">
<span className="ml-10 font-black font-mono">GITHUB ACOUNT USERNAME: </span>
{userData.github_username}
<p className="text-justify ml-10 pt-1 text-md font-mono tracking-wide text-sky-800">
<span className="ml-10 font-black font-mono">DATE STARTED TRACKING: </span>
DEC 12, 2018
</p>
<p className="text-justify ml-20 pt-1 text-md font-mono tracking-wide text-sky-800">
<span className="ml-10 font-black font-mono">SELECTED REPO: </span>
DirectReport
<p className="text-justify ml-10 pt-1 text-md font-mono tracking-wide text-sky-800">
<span className="ml-10 font-black font-mono">LAST REPORT CREATED: </span>
DEC 12, 2021
</p>

<div className=" rounded-2xl flex items-center justify-center">
<button
className="bg-sky-500 hover:bg-slate-100 self-center text-white font-mono tracking-wide text-sm font-semibold shadow-[1.5px_2px_1.0px_0.5px_rgba(0,0,0,0.48)] hover:white hover:text-blue-500 hover:border-gray-200 py-2 px-30 rounded-3xl mt-5"
className="bg-blue-600 hover:bg-slate-100 self-center text-white font-mono tracking-wide text-sm font-semibold shadow-[1.5px_2px_1.0px_0.5px_rgba(0,0,0,0.48)] hover:white hover:text-blue-500 hover:border-gray-200 py-2 px-30 rounded-3xl mt-10"
type="button">
<a className="px-10 py-2 tracking-wide" href='/dashboard/reports/new'>NEW REPORT</a>
<a className="px-10 py-2 tracking-wide" href='/dashboard/reports/new'>NEW
REPORT</a>
</button>
</div>
</div>
</div>
</div>
<div className="lg:col-span-1 md:col-span-2 sm:col-span-3 mx-10 lg:px-18 md:px-4 sm:px-0 bg-gray-200 shadow-[1.0px_1.0px_7.0px_0.0px_rgba(0,0,0,0.58)] rounded-b-3xl shadow-[1.0px_1.0px_5.0px_0.0px_rgba(0,0,0,0.58)] ">
<div
className="lg:col-span-1 md:col-span-2 sm:col-span-3 mx-10 lg:px-18 md:px-4 sm:px-0 bg-gray-200 shadow-[1.0px_1.0px_7.0px_0.0px_rgba(0,0,0,0.58)] rounded-b-3xl shadow-[1.0px_1.0px_5.0px_0.0px_rgba(0,0,0,0.58)] ">
<div className="mx-0 min-w-full flex flex-col items-center">
<h1 className="mx-10 pt-5 font-black font-mono tracking-wide text-xl text-sky-800">
<h1 className="mx-10 pt-8 font-black font-mono tracking-wide text-xl text-sky-800">
CONNECT ACCOUNT
</h1>
</div>
<div className="flex items-center justify-center py-2">
<ul>
<li>
<p className="text-justify pt-1 text-md font-mono tracking-wide text-sky-800">
<span className="ml-10 font-black font-mono">GITHUB ACOUNT USERNAME: </span>
{userData.github_username}
</p>
</li>
<l>
<p className="text-justify pt-1 text-md font-mono tracking-wide text-sky-800">
<span className="ml-10 font-black font-mono">SELECTED REPO: </span>
DirectReport
</p>
</l>
</ul>
</div>


<div className="rounded-2xl flex items-center justify-center">
<button className="bg-sky-500 hover:bg-slate-100 self-center text-white font-mono tracking-wide shadow-[1.5px_2px_1.0px_0.7px_rgba(0,0,0,0.48)] hover:white hover:text-blue-500 hover:border-gray-200 text-lg font-bold py-3 px-20 rounded-3xl mt-4 mb-6" type="button">
<svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-6 inline-block ml-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
<div className="rounded-2xl flex items-center justify-center pb-4">
<button
className="bg-blue-600 hover:bg-slate-100 self-center text-white font-mono tracking-wide shadow-[1.5px_2px_1.0px_0.7px_rgba(0,0,0,0.48)] hover:white hover:text-blue-500 hover:border-gray-200 text-lg font-bold py-3 px-20 rounded-3xl mt-4 mb-6"
type="button">
<svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-6 inline-block ml-5"
fill="currentColor" viewBox="0 0 24 24">
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
<a className="pl-3 pr-15 py-5 tracking-wide" href='/authorize/github'>GitHub</a>
</button>
Expand Down
32 changes: 17 additions & 15 deletions DirectReport/browserview/static/js/teamreport/teamreport.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,15 +167,19 @@ class TeamReport extends React.Component {
render() {
return (
<div>

<h1 id="h1content" className="self-center text-center text-2xl text-blue-800 text-center font-bold font-mono pt-10 pb-2 mb-8 pt-8 mx-30 px-20">
Generate Team Report From Metadata
</h1>

{repoPopoverUI()}

<div id="topRow" className="grid grid-cols-3 gap-10 rounded-3xl mx-20 mt-6">
<div className="lg:col-span-1 sm:col-span-3 justify-center" id="edit_summary_div">
<div className="pb-6 pt-2 bg-blue-500 rounded-3xl px-6 shadow-[1.0px_1.0px_2.0px_1.0px_rgba(0,0,0,0.58)]">
<div className="pb-6 pt-2 bg-blue-600 rounded-3xl px-6 shadow-[1.0px_1.0px_2.0px_1.0px_rgba(0,0,0,0.58)]">

<h1 id="title_element" className="self-center text-center text-white text-xl text-center font-bold font-mono mb-1 mt-3 py-2">
Github
Github Data
</h1>

{this.state.commits.length > 0 && (
Expand All @@ -191,49 +195,47 @@ class TeamReport extends React.Component {
})}
</div>
)}

<div className="self-center mb-1 mt-1">
<div className="mx-0 min-w-full flex flex-col items-center">
{this.state.repos.length > 0 && (
<button className="bg-sky-500 hover:bg-slate-100 self-center text-white font-mono tracking-wide shadow-[1.5px_2px_1.0px_0.5px_rgba(0,0,0,0.48)] hover:white hover:text-blue-500 hover:border-gray-200 text-md font-bold py-3 px-10 rounded-3xl mt-2 mb-3" onClick={(e) => this.openRepoPopover(this.state.repos, this.state)} type="button">
<svg xmlns="http://www.w3.org/2000/svg"
className="h-7 w-6 inline-block ml-10" fill="currentColor"
viewBox="0 0 24 24">
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
<button className="bg-white hover:bg-slate-100 self-center text-blue-600 font-mono tracking-wide shadow-[1.5px_2px_1.0px_0.5px_rgba(0,0,0,0.48)] hover:white hover:text-blue-500 hover:border-gray-200 text-md font-bold py-3 px-12 rounded-3xl mt-2 mb-3" onClick={(e) => this.openRepoPopover(this.state.repos, this.state)} type="button">
<svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-6 inline-block ml-10" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
<span className="px-4 py-2 tracking-wide">Select GitHub Repo</span>
<span className="px-4 py-2 tracking-wide">Repository</span>
</button>
)}
</div>
</div>
</div>

</div>

<div id="show_summmary_div" className="lg:col-span-1 sm:col-span-3 justify-center">
<div className="pb-6 pt-2 bg-blue-500 rounded-3xl px-30 shadow-[1.0px_1.0px_5.0px_0.0px_rgba(0,0,0,0.58)]">
<div className="pb-6 pt-2 bg-blue-600 rounded-3xl px-30 shadow-[1.0px_1.0px_5.0px_0.0px_rgba(0,0,0,0.58)]">
<h1 className="self-center text-center text-xl text-white text-center font-bold font-mono mb-1 mt-3 py-2 mt-2 mx-20 px-20">Summary</h1>
<div id="summary" className="px-4 mx-0 mb-1 mt-1">
{this.state.teamData.length > 0 && (
<div id="summary-container"
className="ml-3 mr-3 bg-slate-100 shadow-[1.0px_1.0px_6.0px_0.0px_rgba(0,0,0,0.58)] overflow-y-scroll h-100 rounded-3xl tracking-wide text-gray-500 md:text-gl dark:text-gray-400 mt-3 px-3">
<div id="summary-container" className="ml-3 mr-3 bg-slate-100 shadow-[1.0px_1.0px_6.0px_0.0px_rgba(0,0,0,0.58)] overflow-y-scroll h-100 rounded-3xl tracking-wide text-gray-500 md:text-gl dark:text-gray-400 mt-3 px-3">
{ShowSummary(this.state.reportData)}
{ShowHighlights(this.state.reportData)}
</div>
)}
</div>
</div>
</div>

<div id="team_member_to_select" className="lg:col-span-1 sm:col-span-3 justify-center">
<div
className="pb-6 pt-2 bg-blue-500 rounded-3xl px-4 mb-2 shadow-[1.0px_1.0px_5.0px_0.0px_rgba(0,0,0,0.58)]">
className="pb-6 pt-2 bg-blue-600 rounded-3xl px-4 mb-2 shadow-[1.0px_1.0px_5.0px_0.0px_rgba(0,0,0,0.58)]">
<h1 className="self-center text-center text-xl text-white text-center font-bold font-mono mb-1 mt-3 py-2 mx-20 px-20">Team</h1>
{PopoverUI(closePopover)}
{this.state.teamData.length > 0 && (
<div className="content-center py-2 h-90 rounded-3xl mb-1 bg-slate-100 shadow-[1.0px_1.0px_6.0px_0.0px_rgba(0,0,0,0.58)] mx-1 mt-3 px-3">
{ShowTeamList(this.state.teamData)}
</div>

)}

</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion DirectReport/browserview/static/js/teamreport/teamreport_components.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ class GraphDiv extends React.Component {

render() {
return (
<div className="grid grid-cols-3 gap-6 mt-5 mx-20 bg-blue-500 shadow-[1.0px_1.0px_5.0px_0.0px_rgba(0,0,0,0.58)] rounded-3xl px-10 py-3">
<div className="grid grid-cols-3 gap-6 mt-5 mx-20 bg-blue-600 shadow-[1.0px_1.0px_5.0px_0.0px_rgba(0,0,0,0.58)] rounded-3xl px-10 py-3">
<div className="lg:col-span-1 sm:col-span-3 justify-center mt-7 mb-7 bg-white shadow-[1.0px_1.0px_6.0px_0.0px_rgba(0,0,0,0.58)] rounded-3xl px-20 ml-5" id="dd">
<div className="col-span-1 flex justify-center my-2 px-3" id="data_display_div">
<div id="map-container" className="pl-10 pr-5 rounded-3xl"></div>
Expand Down

0 comments on commit 2ec88dc

Please sign in to comment.