Skip to content

Commit 1e40671

Browse files
cs01cs01
committed
add svg icons
1 parent 9565a5b commit 1e40671

File tree

5 files changed

+67
-40
lines changed

5 files changed

+67
-40
lines changed

‎frontend/package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,7 @@
2828
]
2929
},
3030
"dependencies": {
31-
"@types/luxon": "^1.24.4",
3231
"dotenv": "^8.2.0",
33-
"match-sorter": "^4.2.0",
3432
"moment": "^2.28.0",
3533
"react": "^16.13.1",
3634
"react-dom": "^16.13.1",

‎frontend/src/App.css‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -361,7 +361,8 @@ button {
361361
* https://github.com/mozdevs/cssremedy/issues/14
362362
*/
363363

364-
img {
364+
img,
365+
svg {
365366
display: block;
366367
vertical-align: middle;
367368
}
@@ -514,10 +515,6 @@ img {
514515
font-size: 0.75rem;
515516
}
516517

517-
.text-sm {
518-
font-size: 0.875rem;
519-
}
520-
521518
.text-xl {
522519
font-size: 1.25rem;
523520
}
@@ -526,15 +523,14 @@ img {
526523
margin: 0.25rem;
527524
}
528525

529-
.mx-auto {
530-
margin-left: auto;
531-
margin-right: auto;
532-
}
533-
534526
.mt-0 {
535527
margin-top: 0;
536528
}
537529

530+
.mr-3 {
531+
margin-right: 0.75rem;
532+
}
533+
538534
.mb-10 {
539535
margin-bottom: 2.5rem;
540536
}
@@ -578,6 +574,12 @@ img {
578574
color: rgba(255, 255, 255, var(--text-opacity));
579575
}
580576

577+
.text-blue-800 {
578+
--text-opacity: 1;
579+
color: #2c5282;
580+
color: rgba(44, 82, 130, var(--text-opacity));
581+
}
582+
581583
.w-full {
582584
width: 100%;
583585
}

‎frontend/src/App.tsx‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,6 @@ import {
1313
} from './Tools';
1414
import { RecoilRoot, useRecoilValue } from 'recoil';
1515

16-
interface AppProps {}
17-
1816
function FeatureFilters() {
1917
return (
2018
<>
@@ -24,16 +22,24 @@ function FeatureFilters() {
2422
</>
2523
);
2624
}
27-
25+
const githubLogo = (
26+
<svg width="24" height="24" fill="currentColor" className="text-white mr-3 ">
27+
<path
28+
fill-rule="evenodd"
29+
clip-rule="evenodd"
30+
d="M12 2C6.477 2 2 6.463 2 11.97c0 4.404 2.865 8.14 6.839 9.458.5.092.682-.216.682-.48 0-.236-.008-.864-.013-1.695-2.782.602-3.369-1.337-3.369-1.337-.454-1.151-1.11-1.458-1.11-1.458-.908-.618.069-.606.069-.606 1.003.07 1.531 1.027 1.531 1.027.892 1.524 2.341 1.084 2.91.828.092-.643.35-1.083.636-1.332-2.22-.251-4.555-1.107-4.555-4.927 0-1.088.39-1.979 1.029-2.675-.103-.252-.446-1.266.098-2.638 0 0 .84-.268 2.75 1.022A9.606 9.606 0 0112 6.82c.85.004 1.705.114 2.504.336 1.909-1.29 2.747-1.022 2.747-1.022.546 1.372.202 2.386.1 2.638.64.696 1.028 1.587 1.028 2.675 0 3.83-2.339 4.673-4.566 4.92.359.307.678.915.678 1.846 0 1.332-.012 2.407-.012 2.734 0 .267.18.577.688.48C19.137 20.107 22 16.373 22 11.969 22 6.463 17.522 2 12 2z"
31+
></path>
32+
</svg>
33+
);
2834
function FeaturesAndTable() {
35+
const [toolData, setToolData] = useState(initialToolData);
2936
useEffect(() => {
3037
async function _fetchGithubData() {
3138
setToolData(await fetchGithubData());
3239
}
3340
_fetchGithubData();
3441
}, []);
3542

36-
const [toolData, setToolData] = useState(initialToolData);
3743
const featureFilters = useRecoilValue(recoilFilters);
3844
const data = useMemo(() => getTableData(toolData, featureFilters), [
3945
toolData,
@@ -52,7 +58,7 @@ function App() {
5258
<RecoilRoot>
5359
<div className="w-full h-full content-center items-center flex flex-col">
5460
<nav className="bg-blue-800 p-2 w-full mb-10">
55-
<div className="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 py-2">
61+
<div className="w-full flex flex-wrap items-center justify-between mt-0 py-2">
5662
<div className="pl-4 flex items-center">
5763
<img
5864
alt="Python logo"
@@ -62,14 +68,19 @@ function App() {
6268
The Big List of Python Packaging and Distribution Tools
6369
</div>
6470
</div>
71+
<div className="text-white">
72+
<a href="https://github.com/cs01/python-packaging-tools">
73+
{githubLogo}
74+
</a>
75+
</div>
6576
</div>
6677
</nav>
6778
<div className="container w-full mx-15">
6879
<FeaturesAndTable />
6980
</div>
7081
<footer className="w-full flex items-center bg-black mt-20 h-64 text-white ">
71-
<div className="w-full text-center">
72-
<a href="http://grassfedcode.com">grassfedcode.com</a>
82+
<div className="w-full text-xl text-center text-blue-800">
83+
a <a href="http://grassfedcode.com">grassfedcode.com</a> project
7384
</div>
7485
</footer>
7586
</div>

‎frontend/src/Tools.tsx‎

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,41 @@ export function Table({ columns, data }: any) {
9090
>
9191
{column.render('Header')}
9292
<span>
93-
{column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
93+
{column.isSorted ? (
94+
column.isSortedDesc ? (
95+
<svg
96+
xmlns="http://www.w3.org/2000/svg"
97+
fill="none"
98+
viewBox="0 0 24 24"
99+
stroke="currentColor"
100+
style={{ width: '12px', height: '12px' }}
101+
>
102+
<path
103+
strokeLinecap="round"
104+
strokeLinejoin="round"
105+
strokeWidth={2}
106+
d="M19 14l-7 7m0 0l-7-7m7 7V3"
107+
/>
108+
</svg>
109+
) : (
110+
<svg
111+
xmlns="http://www.w3.org/2000/svg"
112+
fill="none"
113+
viewBox="0 0 24 24"
114+
stroke="currentColor"
115+
style={{ width: '12px', height: '12px' }}
116+
>
117+
<path
118+
stroke-linecap="round"
119+
stroke-linejoin="round"
120+
stroke-width="2"
121+
d="M5 10l7-7m0 0l7 7m-7-7v18"
122+
/>
123+
</svg>
124+
)
125+
) : (
126+
''
127+
)}
94128
</span>
95129
</th>
96130
))}
@@ -285,7 +319,7 @@ export function FeatureFilter(props: { feature: Feature }) {
285319
return (
286320
<button
287321
className={
288-
(filterIsOn ? `bg-blue-400 text-xs` : `bg-blue-200 text-sm`) +
322+
(filterIsOn ? `bg-blue-400 text-xs` : `bg-blue-200 text-xs`) +
289323
' hover:bg-blue-200 m-1 p-1 rounded-md '
290324
}
291325
onClick={() => {

‎frontend/yarn.lock‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1108,7 +1108,7 @@
11081108
dependencies:
11091109
regenerator-runtime "^0.13.4"
11101110

1111-
"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.10.5", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
1111+
"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
11121112
version "7.11.2"
11131113
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
11141114
integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
@@ -1667,11 +1667,6 @@
16671667
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
16681668
integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
16691669

1670-
"@types/luxon@^1.24.4":
1671-
version "1.24.4"
1672-
resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-1.24.4.tgz#5dbd050b89247dbccab6eaa7744874c1fb7cea85"
1673-
integrity sha512-ce+P0b4rVq3LNXdD5r7eDqX2ydz2BonmTgVrHrV5yxsNKTt3YpnT5QDrid7xMAThhE/gg1RLAbxqbW1OCdiZog==
1674-
16751670
"@types/minimatch@*":
16761671
version "3.0.3"
16771672
resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -6947,14 +6942,6 @@ map-visit@^1.0.0:
69476942
dependencies:
69486943
object-visit "^1.0.0"
69496944

6950-
match-sorter@^4.2.0:
6951-
version "4.2.0"
6952-
resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-4.2.0.tgz#70c4e7443dacf5fa2503bc5afc189024092e9d27"
6953-
integrity sha512-oEvLn8R+a30YZ9l5XdCTkYQuLsOs8frxEqQTAuxoqkQx/qV5pQpx/NqAWvJ5xbYecqfXoF/ZevaIS1+NkbRymg==
6954-
dependencies:
6955-
"@babel/runtime" "^7.10.5"
6956-
remove-accents "0.4.2"
6957-
69586945
md5.js@^1.3.4:
69596946
version "1.3.5"
69606947
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -9329,11 +9316,6 @@ relateurl@^0.2.7:
93299316
resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
93309317
integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
93319318

9332-
remove-accents@0.4.2:
9333-
version "0.4.2"
9334-
resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
9335-
integrity sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U=
9336-
93379319
remove-trailing-separator@^1.0.1:
93389320
version "1.1.0"
93399321
resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"

0 commit comments

Comments
 (0)