search

FlowCrypt / flowcrypt-android

FlowCrypt Android App
https://flowcrypt.com
Other
91 stars 11 forks source link

Support dark mode for message details #2075

Closed DenBond7 closed 10 months ago

DenBond7 commented 1 year ago 
    But in another hand, we will still have bad UI for the night mode. There is a problem with the repeatable background image. It would be nice to resolve this issue on the HTML side.

Currently, the app produces the following HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <style>
                body { word-wrap: break-word; word-break: break-word; hyphens: auto; margin-left: 0px; padding-left: 0px; }
                body img { display: inline !important; height: auto !important; max-width: 95% !important; }
                body pre { white-space: pre-wrap !important; }
                body > div.MsgBlock > table { zoom: 75% } /* table layouts tend to overflow - eg emails from fb */

    </style>
</head>
<body>
<div class="MsgBlock GREEN"
     style="
     padding-left: 8px;
     min-height: 50px;
     padding-top: 4px;
     padding-bottom: 4px;
     width: 100%;
     border: 1px solid #f0f0f0;
     border-left: 8px solid #31A217;
     border-right: none;
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAh1BMVEXw8PD////w8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PD7MuHIAAAALXRSTlMAAAECBAcICw4QEhUZIyYqMTtGTV5kdn2Ii5mfoKOqrbG0uL6/xcnM0NTX2t1l7cN4AAAB0UlEQVR4Ae3Y3Y4SQRCG4bdHweFHRBTBH1FRFLXv//qsA8kmvbMdXhh2Q0KfknpSCQc130c67s22+e9+v/+d84fxkSPH0m/+5P9vN7vRV0vPfx7or1NB23e99KAHuoXOOc6moQsBwNN1Q9g4Wdh1uq3MA7Qn0+2ylAt7WbWpyT+Wo8roKH6v2QhZ2ghZ2ghZ2ghZ2ghZ2ghZ2ghZ2ghZ2ghZ2ghZ2ghZ2ghZ2ghZ2gjZ2AUNOLmwgQdogEJ2dnF3UJdU3WjqO/u96aYtVd/7jqvIyu76G5se6GaY7tNNcy5d7se7eWVnDz87fMkuVuS8epF6f9NPObPY5re9y4N1/vya9Gr3se2bfvl9M0mkyZdv077p+a/3z4Meby5Br4NWiV51BaiUqfLro9I3WiR61RVcffwfXI7u5zZ20EOA82Uu8x3SlrSwXQuBSvSqK0AletUVoBK96gpIwlZy0MJWctDCVnLQwlZy0MJWctDCVnLQwlZy0MJWctDCVnLQwlZy0MJWctDCVnLQwlZy0MJWckIletUVIJJxITN6wtZd2EI+0NquyIJOnUpFVvRpcwmV6FVXgEr0qitAJXrVFaASveoKUIledQWoRK+6AlSiV13BP+/VVbky7Xq1AAAAAElFTkSuQmCC);">
    <html>
    <head></head>
    <body>It's now easier than ever to make the switch from iPhone to Android. Transfer your
    contacts, messages, photos and favorite apps. Just connect, select and go.<br><br>It's now
    easier than ever to make the switch from iPhone to Android. Transfer your contacts, messages,
    photos and favorite apps. Just connect, select and go.<br><br>It's now easier than ever to make
    the switch from iPhone to Android. Transfer your contacts, messages, photos and favorite apps.
    Just connect, select and go.<br><br>It's now easier than ever to make the switch from iPhone to
    Android. Transfer your contacts, messages, photos and favorite apps. Just connect, select and
    go.<br><br>It's now easier than ever to make the switch from iPhone to Android. Transfer your
    contacts, messages, photos and favorite apps. Just connect, select and go.
    </body>
    </html>
</div><!-- next MsgBlock -->
</body>
</html>

We need to modify background-image: url( somehow to be able to use night and day version of the background. Maybe we can use SVG there. And after generation, I can replace the fill color. Something like this one SVG as background image inlined in style attribute

I think it will be for a separate issue.

Originally posted by @DenBond7 in https://github.com/FlowCrypt/flowcrypt-android/issues/2026#issuecomment-1314135820

DenBond7 commented 1 year ago

@tomholub I have only base HTML knowledge. Maybe you can attach someone here or you will have some thoughts.

The simplest way there is to have at least SVG as background image inlined in style attribute. The best way - add full support for day/night on the HTML side.

Some useful links:

DenBond7 commented 1 year ago

We should receive the following image

image

DenBond7 commented 1 year ago

For me, background dark version

data:image/png;base64,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

DenBond7 commented 1 year ago

pattern 

<svg fill="#000000"
    height="45"
    viewBox="0 0 67 67"
    width="45"
    xmlns="http://www.w3.org/2000/svg">
    <defs>
        <clipPath id="a">
            <path d="M0 0h67v67H0z" />
        </clipPath>
    </defs>
    <g clip-path="url(#a)">
        <path d="M33.5-4.038c-1.502 0-2.73 1.133-2.73 2.519v1.26h-1.365v5.038h8.189V-.259h-1.365v-1.26c0-1.386-1.228-2.519-2.729-2.519Zm0 1.259c.764 0 1.364.555 1.364 1.26v1.26h-2.729v-1.26c0-.705.6-1.26 1.365-1.26Z" />
    </g>
    <path d="M33.5 63.297c-1.501 0-2.729 1.133-2.729 2.519v1.26h-1.365v5.038h8.189v-5.038H36.23v-1.26c0-1.386-1.229-2.519-2.73-2.519Zm0 1.259c.764 0 1.365.555 1.365 1.26v1.26h-2.73v-1.26c0-.705.601-1.26 1.365-1.26ZM67 28.584c-1.501 0-2.729 1.134-2.729 2.519v1.26h-1.365v5.038h8.189v-5.038H69.73v-1.26c0-1.385-1.228-2.519-2.73-2.519Zm0 1.26c.765 0 1.365.554 1.365 1.259v1.26h-2.73v-1.26c0-.705.601-1.259 1.365-1.259Zm-56.933-7.769 11.23-11.4.702.713-11.23 11.4zm45.433.713-11.23-11.4.702-.713 11.23 11.4zM44.27 56.059l11.23-11.4.702.713-11.23 11.4zm-22.973.712-11.23-11.4.702-.713 11.23 11.4zM0 28.584c-1.501 0-2.729 1.134-2.729 2.519v1.26h-1.365v5.038h8.189v-5.038H2.73v-1.26c0-1.385-1.228-2.519-2.73-2.519Zm0 1.26c.765 0 1.365.554 1.365 1.259v1.26h-2.73v-1.26c0-.705.601-1.259 1.365-1.259Z" />
</svg>

pattern

martgil commented 1 year ago

We have received the following concerns from users who are having difficulty reading messages in the dark theme. The white patterned background seems to interfere with the white text messages.

white-background-pattern-on-dark-theme

Reference: https://mail.google.com/mail/u/human@flowcrypt.com/#inbox/FMfcgzGsmrJzSNVzfSSxRWbvhZVsZdNw https://mail.google.com/mail/u/human@flowcrypt.com/#inbox/FMfcgzGrcPLmzvkbLwbvQbVHZJrJvKDw

DenBond7 commented 10 months ago

image