Skip to content

Commit

Permalink
feat: starting theming work on left pane and commented on areas that …
Browse files Browse the repository at this point in the history 
…will need to be fixed
  • Loading branch information
@yougotwill
yougotwill committed Sep 12, 2022
1 parent 6cd81e0 commit 2cb7e72
Show file tree
Hide file tree
Showing 23 changed files with 157 additions and 113 deletions.
6 changes: 3 additions & 3 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@
<style>
body {
text-align: center;
background-color: rgba(0, 0, 0);
color: white;
background-color: var(--background-primary-color);
color: var(--text-primary-color);
font-size: 14px;
}

Expand All @@ -29,7 +29,7 @@
}

a {
color: white;
color: var(--text-primary-color);
}
</style>
</head>
Expand Down
2 changes: 1 addition & 1 deletion debug_log.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<link href="stylesheets/dist/manifest.css" rel="stylesheet" type="text/css" />
<style>
body {
background-color: #000;
background-color: var(--background-primary-color);
}
</style>
</head>
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@
"scripts": {
"start-prod": "cross-env NODE_ENV=production NODE_APP_INSTANCE=devprod$MULTI electron .",

"build-everything": "yarn clean && yarn protobuf && grunt && yarn sass && tsc && yarn parcel-util-worker",
"build-everything:watch": "yarn clean && yarn protobuf && grunt && yarn sass && yarn parcel-util-worker && tsc -w",
"build-everything": "yarn clean && yarn protobuf && grunt && yarn sass && tsc && yarn parcel-util-worker",
"build-everything:watch": "yarn clean && yarn protobuf && grunt && yarn sass && yarn parcel-util-worker && tsc -w",

"protobuf": "pbjs --target static-module --wrap commonjs --out ts/protobuf/compiled.js protos/*.proto && pbts --out ts/protobuf/compiled.d.ts ts/protobuf/compiled.js --force-long",
"sass": "rimraf 'stylesheets/dist/' && parcel build --target sass --no-autoinstall --no-cache",
Expand Down
1 change: 1 addition & 0 deletions stylesheets/_avatar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
img {
object-fit: cover;
border-radius: 50%;
// TODO Theming update
border: 1px solid var(--color-avatar-border-color);
}
}
Expand Down
3 changes: 2 additions & 1 deletion stylesheets/_conversation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,14 @@
}

.session-icon-button {
background-color: var(--color-accent);
background-color: var(--button-icon-background-color);
box-shadow: none;

filter: brightness(1.05);
svg path {
transition: var(--default-duration);
opacity: 0.6;
// TODO Theming remove
fill: var(--color-text-opposite);
}
}
Expand Down
2 changes: 1 addition & 1 deletion stylesheets/_mentions.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,5 +26,5 @@
}

.module-conversation-list-item--mentioned-us {
border-left: 4px solid var(--color-session-green-color) !important;
border-left: 4px solid var(--conversation-tab-color-strip-color) !important;
}
1 change: 1 addition & 0 deletions stylesheets/_modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,7 @@
position: relative;

.module-avatar {
// TODO Theming update
box-shadow: 0px 0px 13px 0.5px var(--color-session-shadow);
}

Expand Down
22 changes: 11 additions & 11 deletions stylesheets/_modules.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
display: inline-block;
position: absolute;
bottom: 4px;
@include color-svg('../images/error.svg', var(--color-destructive));
@include color-svg('../images/error.svg', var(--danger-color));
}

.module-message__error--outgoing {
Expand Down Expand Up @@ -393,7 +393,7 @@
.module-message-detail__delete-button {
@include button-reset;

background-color: var(--color-destructive);
background-color: var(--danger-color);
color: var(--color-white-color);
box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7);
border-radius: 5px;
Expand Down Expand Up @@ -421,7 +421,7 @@
}

.module-message-detail__contact__error {
color: var(--color-destructive);
color: var(--danger-color);
font-weight: 300;
}

Expand Down Expand Up @@ -633,17 +633,17 @@
cursor: pointer;

&:hover {
background-color: var(--color-dark-gray-color);
background-color: var(--conversation-tab-background-hover-color);
}

&--is-blocked {
border-left: 4px solid var(--color-destructive) !important;
border-left: 4px solid var(--danger-color) !important;
}
}

.module-conversation-list-item__unread-count {
color: var(--color-white-color);
background-color: var(--color-session-green-color);
background-color: var(--unread-messages-alert-background-color);
color: var(--unread-messages-alert-text-color);
text-align: center;

padding-top: 1px;
Expand All @@ -662,7 +662,7 @@
min-width: 16px;
line-height: 16px;
border-radius: 8px;

// TODO Theming Should we remove this?
box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color);
}

Expand Down Expand Up @@ -704,7 +704,7 @@

.module-conversation-list-item__header__date--has-unread {
font-weight: 300;
color: var(--color-lighter-gray-color);
color: var(--conversation-tab-text-unread-color);
}

.module-conversation-list-item__message {
Expand All @@ -720,7 +720,7 @@
font-size: var(--font-size-sm);
line-height: 18px;

color: var(--color-light-gray-color);
color: var(--conversation-tab-text-color);

height: 1.3em;
overflow: hidden;
Expand All @@ -733,7 +733,7 @@

.module-conversation-list-item__message__text--has-unread {
font-weight: 400;
color: var(--color-lighter-gray-color);
color: var(--conversation-tab-text-unread-color);
}

// Module: Image
Expand Down
8 changes: 5 additions & 3 deletions stylesheets/_session.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -342,6 +342,7 @@ label {

.conversation-header {
.module-avatar img {
// TODO Theming Update
box-shadow: 0px 0px 5px 0px rgba(var(--color-white-color-rgb), 0.2);
}

Expand Down Expand Up @@ -693,7 +694,7 @@ label {
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--color-session-green-color);
background: var(--primary-color);
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
div:nth-child(1) {
Expand Down Expand Up @@ -836,17 +837,18 @@ input {
width: 40px;
border-radius: 50%;
opacity: 1;
background-color: var(--color-cell-background);
background-color: var(--button-icon-background-color);
box-shadow: var(--color-session-shadow);

svg path {
transition: var(--default-duration);
opacity: 0.6;
fill: var(--color-text);
fill: var(--button-icon-stroke-color);
}

&:hover svg path {
opacity: 1;
fill: var(--button-icon-stroke-hover-color);
}
}
}
Expand Down
27 changes: 12 additions & 15 deletions stylesheets/_session_left_pane.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,30 +13,31 @@ $session-compose-margin: 20px;
}

&-list-item {
background: var(--conversation-tab-background-color);
transition: var(--default-duration);

&:hover {
background: var(--color-clickable-hovered);
background: var(--conversation-tab-background-hover-color);
}

&--is-selected {
background: var(--color-conversation-item-selected);
background: var(--conversation-tab-background-selected-color);

.module-conversation__user__profile-number,
.module-conversation__user__profile-name,
.module-conversation-list-item__message__text {
color: var(--color-text);
color: var(--conversation-tab-text-selected-color);
}
}

&--has-unread {
border-left: var(--border-unread);
background: var(--color-conversation-item-has-unread);
background: var(--conversation-tab-background-unread-color);
border-left: 4px solid var(--conversation-tab-color-strip-color);
}

&__unread-count {
color: var(--color-text);
background: var(--color-clickable-hovered);
background: var(--conversation-tab-bubble-background-color);
color: var(--conversation-tab-bubble-text-color);

position: static !important;
font-weight: 700 !important;
Expand All @@ -52,9 +53,9 @@ $session-compose-margin: 20px;
}

&__message__text {
color: var(--color-light-gray-color);
color: var(--conversation-tab-text-color);
&--has-unread {
color: var(--color-text);
color: var(--conversation-tab-text-unread-color);
}
}

Expand All @@ -65,7 +66,7 @@ $session-compose-margin: 20px;

&__header__name--with-unread .module-conversation__user__profile-number,
&__header__name--with-unread .module-conversation__user__profile-name {
color: var(--color-text);
color: var(--conversation-tab-text-unread-color);
}
}
}
Expand Down Expand Up @@ -98,7 +99,7 @@ $session-compose-margin: 20px;
}

&-overlay {
background: var(--color-left-pane-overlay-background);
background: var(--background-primary-color);

display: flex;
flex-direction: column;
Expand Down Expand Up @@ -164,10 +165,6 @@ $session-compose-margin: 20px;
margin-top: 10px;
width: 250px;
filter: var(--filter-session-text);

transition: 0s;
.path {
fill: red;
}
}
}
42 changes: 22 additions & 20 deletions stylesheets/_theme_dark.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,33 +259,35 @@
.module-empty-state {
color: var(--color-light-gray-color);
}

// TODO Theming Remove
// Module: Conversation List Item

.module-conversation-list-item--is-selected {
background-color: var(--color-dark-gray-color);
}
// .module-conversation-list-item--is-selected {
// background-color: var(--color-dark-gray-color);
// }

.module-conversation-list-item__unread-count {
color: var(--color-white-color);
background-color: var(--color-session-green-color);
box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color);
}
// .module-conversation-list-item__unread-count {
// color: var(--color-white-color);
// background-color: var(--color-session-green-color);
// box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color);
// }

.module-conversation-list-item__header__name {
color: var(--color-lighter-gray-color);
}
// .module-conversation-list-item__header__name {
// color: var(--color-lighter-gray-color);
// }

.module-conversation-list-item__header__date--has-unread {
color: var(--color-lighter-gray-color);
}
// .module-conversation-list-item__header__date--has-unread {
// color: var(--color-lighter-gray-color);
// }

.module-conversation-list-item__message__text {
color: var(--color-light-gray-color);
}
// .module-conversation-list-item__message__text {
// color: var(--color-light-gray-color);
// }

.module-conversation-list-item__message__text--has-unread {
color: var(--color-lighter-gray-color);
}
// .module-conversation-list-item__message__text--has-unread {
// color: var(--color-lighter-gray-color);
// }

// Module: Image

Expand Down
10 changes: 5 additions & 5 deletions ts/components/avatar/Avatar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,20 +43,20 @@ const Identicon = (props: Props) => {
};

const CrownWrapper = styled.div`
position: absolute;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 0%;
right: 12%;
height: 20px;
width: 20px;
transform: translate(25%, 25%);
color: #f7c347;
background: var(--color-inbox-background);
background: var(--background-primary-color);
border-radius: 50%;
/* TODO Theming update? */
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3));
align-items: center;
justify-content: center;
`;

export const CrownIcon = () => {
Expand Down
5 changes: 4 additions & 1 deletion ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useEffect, useState } from 'react';
import { COLORS } from '../../../themes/colors';
import { getInitials } from '../../../util/getInitials';

type Props = {
Expand All @@ -20,7 +21,7 @@ const sha512FromPubkey = async (pubkey: string): Promise<string> => {
// key is the pubkey, value is the hash
const cachedHashes = new Map<string, number>();

const avatarPlaceholderColors = ['#5ff8b0', '#26cdb9', '#f3c615', '#fcac5a'];
const avatarPlaceholderColors = Object.values(COLORS.PRIMARY);

function useHashBasedOnPubkey(pubkey: string) {
const [hash, setHash] = useState<number | undefined>(undefined);
Expand Down Expand Up @@ -79,6 +80,7 @@ export const AvatarPlaceHolder = (props: Props) => {

if (loading || !hash) {
// return grey circle
// TODO Theming update
return (
<svg viewBox={viewBox}>
<g id="UrTavla">
Expand All @@ -104,6 +106,7 @@ export const AvatarPlaceHolder = (props: Props) => {

const bgColor = avatarPlaceholderColors[bgColorIndex];

// TODO Theming Update
return (
<svg viewBox={viewBox}>
<g id="UrTavla">
Expand Down
Loading

0 comments on commit 2cb7e72

Please sign in to comment.