feat(YouTube - Settings): Add option to use new Cairo settings menus

[LisoUseInAIKyrios]

Adds a setting option to enable/disable the new YouTube Cairo settings menus.

If YouTube Cairo style settings are enabled, then some other parts of the app also change such as the watch history seekbar progress bar that uses a two color cairo theme.

[oSumAtrIX]

Regarding the icons, it looks like YT only uses icons for the top level preferences and not for individual preferences, so there's no need to add icons to them in the ReVanced preferences

[LisoUseInAIKyrios]

The ReVanced icon looks slightly too bold compared to the other YouTube icons.

Not a requirement, but it would be nice to have if a 'slim' version of the logo existed.

[ILoveOpenSourceApplications]

The ReVanced icon looks slightly compared to the other YouTube icons.

Not a requirement, but it would be nice to have if a 'slim' version of the logo existed.

Maybe try reducing the strokeWidth to a smaller value, like 0.5?

[LisoUseInAIKyrios]

Maybe try reducing the strokeWidth to a smaller value, like 0.5?

I tried but it doesn't change anything. Stroke width is the edge of the fill, and since the edge of the fill is the same as the fill it makes no difference,

I also tried using EnDesign to modify the original file, but couldn't find any simple way to 'slim' the 'V' shape without manually mucking about (art design is not my thing).

[0xrxL]

@LisoUseInAIKyrios Consider to move the about button inside revanced settings outside, in revanced section of general settings.

I think it makes more sense.

[LisoUseInAIKyrios]

I think the settings button is convenient when it's the first item. Having some items in the YT root menu while all the rest are in the sub menu might feel kind of weird.

[LisoUseInAIKyrios]

Preference Categories can now be added, but I can only think of 3 or 4 places where they might help with organizing (and then the settings might feel a little weird with random groups in some places but not others).

So far submenus and alphabetical sorting has worked ok so maybe groups are not needed.

[0xrxL]

I think the settings button is convenient when it's the first item. Having some items in the YT root menu while all the rest are in the sub menu might feel kind of weird.

A thing like that:

[oSumAtrIX]

The settings patch of ReVanced should inject one preference in apps and patches are then free to add subpreferences. About belongs inside the ReVanced preference

[oSumAtrIX]

The ReVanced icon looks slightly too bold compared to the other YouTube icons.

Not a requirement, but it would be nice to have if a 'slim' version of the logo existed.

An outline version can be created and tracked here https://github.com/ReVanced/revanced-branding

[oSumAtrIX]

I realized it would be difficult to decide on an outline width, so the fill can be converted to an outline depending on the need in a specific situation. Here is the logo with an inwards stroke with 12pt width (seemed to be what the other icons were using)

[LisoUseInAIKyrios]

@oSumAtrIX can you upload that SVG/xml here or to the branding repo?

[oSumAtrIX]

The image above is an svg, you should be able to open it and right click and save. The reason I don't want to put it in the branding repo is because each situation would ask for a different stroke width. The fill version is already on the branding repo out of which a stroke version can be made depending on the situations needs, no guidelines in that regard

[LisoUseInAIKyrios]

When resized to 24dp it loses a lot of detail.

Use this as-is? Or use the existing bold icon and later figure out a slimmer variant?

[oSumAtrIX]

I guess the shape can be converted to a V and the diamond can stay a triangle. Would need to figure out how to achieve that conversion from the current paths

[MarcaDian]

What if? I'll try how it looks in app

[LisoUseInAIKyrios]

Could try remove some points of the V path to leave only the top of the V outline.

[oSumAtrIX]

The V stroke should be perfectly inside the V shape, but I'm not sure how one would calculate that. Probably possible easily

[MarcaDian]

Try making the 'V' two straight solid lines as osumatrix suggested

Something like this?)

I try to follow this official style

[LisoUseInAIKyrios]

Try converting to drawable xml and see how it looks in app. The stroke width may need to be more slender to better match the stock icons.

[MarcaDian]

Not ideal, but i hate vector graphic 🥴

Original svg looks like

[MarcaDian]

Edit: Removed unnecessary attributes:

<?xml version="1.0" encoding="utf-8"?>

<!--
 https://github.com/ReVanced/revanced-branding/blob/761f2107ac7962ed1713b0a8ae8db4c3e72849b4/assets/revanced-logo/revanced-logo-shape-dark.svg
 Resized to 16dp
-->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:tint="?colorControlNormal"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24"
        android:viewportHeight="24">

    <path
            android:fillColor="#000000"
            android:fillType="evenOdd"
            android:strokeWidth="1.0"
            android:pathData="M4.38239,3.00064 C4.2393,3.00499,4.14122,3.03265,4.04355,3.18201 C3.91334,3.38124,4.10746,3.77123,4.20301,3.98921 C5.70038,7.40694,10.5705,18.5231,11.6951,21.09 C11.7672,21.2149,11.9006,21.2654,12,21.2654 C12.1019,21.2654,12.2341,21.2127,12.3049,21.09 C13.4295,18.5231,18.2996,7.407,19.7969,3.9892 C19.8924,3.77122,20.0866,3.38122,19.9564,3.182 C19.8262,2.98285,19.6961,3.00064,19.4582,3.00064 L19.2827,3.00064 C19.0829,3.00064,19.0023,3.11861,18.9219,3.3016 C18.1183,5.13184,13.8769,14.7924,12.4603,18.0186 C12.38,18.2016,12.1997,18.3196,11.9999,18.3196 C11.8001,18.3196,11.6198,18.2016,11.5395,18.0186 C10.123,14.7924,5.88149,5.13185,5.07794,3.3016 C4.99759,3.11862,4.91701,3.00064,4.71718,3.00064 L4.54178,3.00064 C4.48229,3.00064,4.43002,2.99919,4.38232,3.00064 Z" />
    <path
            android:fillColor="#000000"
            android:fillType="evenOdd"
            android:strokeWidth="1.0"
            android:pathData="M7.28434,3.00064 C7.06842,3.00064,6.87005,3.11668,6.76215,3.30359 C6.65417,3.49057,6.65417,3.72052,6.76215,3.9075 C7.85768,5.80503,10.3802,10.1757,11.4758,12.0732 C11.5837,12.2602,11.7841,12.3762,12,12.3762 C12.2158,12.3762,12.4162,12.2602,12.5242,12.0732 L17.2379,3.90748 C17.3459,3.7205,17.3459,3.49049,17.2379,3.30357 C17.13,3.11659,16.9316,3.00062,16.7157,3.00062 Z M8.80109,4.09286 L15.1989,4.09286 C15.3454,4.09286,15.4805,4.17132,15.5537,4.29815 C15.6269,4.42494,15.6269,4.5799,15.5537,4.70673 L12.3548,10.2475 C12.2816,10.3743,12.1464,10.4528,12,10.4528 C11.8535,10.4528,11.7184,10.3743,11.6452,10.2475 C10.9021,8.96042,9.18941,5.99386,8.4463,4.70673 C8.37306,4.5799,8.37306,4.42498,8.4463,4.29815 C8.51948,4.17136,8.65463,4.09286,8.80108,4.09286 Z" />
</vector>

[LisoUseInAIKyrios]

Not ideal, but I think it's an improvement over the previous.

Can the bottom of the V be slightly flatter? It looks the same as the other logos except the bottom of the V looks a little pointy.

[MarcaDian]

It is not even visible in the program, but I did everything I could.
When I finished and started to align the width and height, the strokes become bolder )))
Therefore, I had to slightly adjust the width and height to return to the previous thickness.
Edit: more flatter

<?xml version="1.0" encoding="utf-8"?>

<!--
 Adapted from
 https://github.com/ReVanced/revanced-branding/blob/761f2107ac7962ed1713b0a8ae8db4c3e72849b4/assets/revanced-logo/revanced-logo-shape-dark.svg
 Resized to 16dp.
-->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:tint="?colorControlNormal"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="#000000"
        android:fillType="evenOdd"
        android:pathData="M19.5872,3.99233 C19.6801,3.77185,19.8789,3.44672,19.7613,3.20362 C19.6963,3.06937,19.5861,3.00019,19.3558,3.00019 L19.1405,3.00019 C18.9457,3.00019,18.773,3.11962,18.6933,3.30335 C17.9185,5.13604,13.8142,14.8277,12.4461,18.066 C12.3664,18.2497,12.1937,18.3646,11.9989,18.3646 C11.8085,18.3646,11.6314,18.2498,11.5562,18.066 C10.1837,14.8278,6.08386,5.13603,5.30905,3.30335 C5.22936,3.11962,5.05669,3.00019,4.86188,3.00019 L4.64558,3.00019 C4.41535,3.00019,4.30543,3.06946,4.24052,3.20362 C4.1229,3.44674,4.32165,3.77185,4.41463,3.99233 C5.88012,7.46938,10.2054,17.7051,11.206,20.066 C11.3123,20.3232,11.5285,20.6,11.803,20.6 L12.2,20.6 C12.4701,20.6,12.6907,20.3232,12.797,20.066 C13.7932,17.7051,18.1217,7.4694,19.5872,3.9923 Z"
        android:strokeWidth="1"
        android:strokeLineJoin="round"
        android:strokeMiterLimit="2" />
    <path
        android:fillColor="#000000"
        android:fillType="evenOdd"
        android:pathData="M7.44206,3 C7.23397,3,7.04036,3.11405,6.9341,3.30237 C6.83227,3.49069,6.83227,3.72094,6.9341,3.90926 C7.99669,5.81085,10.4352,10.1975,11.4933,12.0991 C11.5996,12.2874,11.7911,12.4015,11.9992,12.4015 C12.2117,12.4015,12.4009,12.2875,12.5072,12.0991 C13.5654,10.1975,16.0062,5.81085,17.0643,3.90926 C17.1706,3.72094,17.1706,3.49069,17.0643,3.30237 C16.9625,3.11405,16.7665,3,16.5584,3 Z M8.91225,4.09059 L15.1052,4.09059 C15.2375,4.09059,15.361,4.16305,15.4258,4.28281 C15.4934,4.40257,15.4934,4.54965,15.4258,4.66941 C14.7529,5.8787,13.0031,8.89953,12.3302,10.1088 C12.2626,10.2286,12.1427,10.3032,12.0075,10.3032 C11.8752,10.3032,11.7545,10.2286,11.6869,10.1088 C11.014,8.89952,9.2653,5.8787,8.58956,4.66941 C8.52481,4.54965,8.52481,4.40257,8.58956,4.28281 C8.65713,4.16305,8.77992,4.09059,8.91225,4.09059 Z"
        android:strokeWidth="1"
        android:strokeLineJoin="round"
        android:strokeMiterLimit="2" />
</vector>

[LisoUseInAIKyrios]

Looks better.

[oSumAtrIX]

So what's left is knowing if/how you calculated the stroke from the shape of the V. For reference https://graphicdesign.stackexchange.com/questions/33792/convert-shape-to-line-with-a-stroke-in-illustrator

[oSumAtrIX]

LGTM. Just the logo needs to be figured out.

[oSumAtrIX]

@LisoUseInAIKyrios

Here is the logo with correct strokes

[LisoUseInAIKyrios]

It looks good when it's a large logo, but when it's scaled down to 16x16dip the bottom looks too pointy and visually becomes different from the flat bottom V shape of the regular logo.

Maybe the bottom needs to be clipped flat and the V intersection curve moved up a little. SVG is not my thing so I'm unfamiliar with how to try that.