Page MenuHomePhabricator
Files F3325228

D10437.id34956.diff
No OneTemporary
Actions

D10437.id34956.diff
View Options

diff --git a/web/app-list/app-list-header.css b/web/app-list/app-list-header.css
new file mode 100644
--- /dev/null
+++ b/web/app-list/app-list-header.css
@@ -0,0 +1,15 @@
+.container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: var(--card-headerBackground-primary-default);
+ padding: 16px;
+ box-shadow: 0px 1px 3px 0px var(--card-headerShawdow-primary-default);
+ z-index: 0;
+ border-radius: 8px 8px 0 0;
+}
+
+.headerLabel {
+ color: var(--text-background-primary-default);
+ font-weight: var(--semi-bold);
+}
diff --git a/web/app-list/app-list-header.react.js b/web/app-list/app-list-header.react.js
new file mode 100644
--- /dev/null
+++ b/web/app-list/app-list-header.react.js
@@ -0,0 +1,27 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import css from './app-list-header.css';
+import AddButton from '../components/add-button.react.js';
+import AppsDirectory from '../modals/apps/apps-directory-modal.react.js';
+
+function AppListHeader(): React.Node {
+ const { pushModal } = useModalContext();
+
+ const onClickApps = React.useCallback(
+ () => pushModal(<AppsDirectory />),
+ [pushModal],
+ );
+
+ return (
+ <div className={css.container}>
+ <div className={css.headerLabel}>Your apps</div>
+ <AddButton onClick={onClickApps} />
+ </div>
+ );
+}
+
+export default AppListHeader;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -50,6 +50,9 @@
--error-dark-50: #b62602;
--error-dark-90: #4f1203;
+ --shadow-dark-35: #00000059;
+ --shadow-light-35: #ffffff59;
+
--logo-bg: #111827;
--spoiler-color: #33332c;
--loading-foreground: #1b0e38;
@@ -262,6 +265,10 @@
--text-background-tertiary-default: var(--shades-black-50);
--text-background-danger-default: var(--error-primary);
+ /* Card */
+ --card-headerBackground-primary-default: var(--shades-black-85);
+ --card-headerShawdow-primary-default: var(--shadow-dark-35);
+
/* Button */
--button-background-primary-default: var(--violet-dark-100);
--button-background-secondary-default: var(--shades-black-75);
@@ -338,6 +345,11 @@
--text-background-tertiary-default: var(--shades-black-50);
--text-background-danger-default: var(--error-primary);
+ /* Card */
+ /* @GINSU: TODO double check these values after redesign is finished */
+ --card-headerBackground-primary-default: var(--shades-white-80);
+ --card-headerShawdow-primary-default: var(--shadow-light-35);
+
/* Button */
--button-background-primary-default: var(--violet-dark-100);
--button-background-secondary-default: var(--shades-black-50);

File Metadata

Mime Type
text/plain
Expires
Thu, Nov 21, 5:27 AM (21 h, 56 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2553850
Default Alt Text
D10437.id34956.diff (2 KB)

Event Timeline