Merge branch 'main_ui' into 'master'

Update UI for Bitmask

See merge request leap/bitmask_android!218

67 files changed, 584 insertions, 1583 deletions

diff --git a/app/src/main/java/se/leap/bitmaskclient/base/MainActivity.java b/app/src/main/java/se/leap/bitmaskclient/base/MainActivity.java
index e2fa0783..28b981be 100644
--- a/app/src/main/java/se/leap/bitmaskclient/base/MainActivity.java
+++ b/app/src/main/java/se/leap/bitmaskclient/base/MainActivity.java
@@ -34,6 +34,7 @@ import static se.leap.bitmaskclient.base.models.Constants.REQUEST_CODE_LOG_IN;
 import static se.leap.bitmaskclient.base.models.Constants.REQUEST_CODE_SWITCH_PROVIDER;
 import static se.leap.bitmaskclient.base.models.Constants.SHARED_PREFERENCES;
 import static se.leap.bitmaskclient.base.utils.PreferenceHelper.storeProviderInPreferences;
+import static se.leap.bitmaskclient.base.utils.ViewHelper.isBrightColor;
 import static se.leap.bitmaskclient.eip.EIP.EIPErrors.ERROR_INVALID_VPN_CERTIFICATE;
 import static se.leap.bitmaskclient.eip.EIP.EIPErrors.ERROR_VPN_PREPARE;
 import static se.leap.bitmaskclient.providersetup.ProviderAPI.ERRORID;
@@ -47,12 +48,18 @@ import static se.leap.bitmaskclient.providersetup.ProviderAPI.USER_MESSAGE;
 
 import android.content.Intent;
 import android.content.SharedPreferences;
+import android.graphics.drawable.ColorDrawable;
+import android.os.Build;
 import android.os.Bundle;
 import android.util.Log;
+import android.view.Window;
+import android.view.WindowManager;
 
+import androidx.annotation.ColorRes;
 import androidx.annotation.StringRes;
 import androidx.appcompat.app.ActionBar;
 import androidx.appcompat.app.AppCompatActivity;
+import androidx.core.content.ContextCompat;
 import androidx.fragment.app.DialogFragment;
 import androidx.fragment.app.Fragment;
 import androidx.fragment.app.FragmentTransaction;
@@ -74,6 +81,7 @@ import se.leap.bitmaskclient.base.fragments.SettingsFragment;
 import se.leap.bitmaskclient.base.models.Provider;
 import se.leap.bitmaskclient.base.models.ProviderObservable;
 import se.leap.bitmaskclient.base.utils.PreferenceHelper;
+import se.leap.bitmaskclient.base.utils.ViewHelper;
 import se.leap.bitmaskclient.eip.EIP;
 import se.leap.bitmaskclient.eip.EipCommand;
 import se.leap.bitmaskclient.eip.EipSetupListener;
@@ -82,7 +90,6 @@ import se.leap.bitmaskclient.providersetup.ProviderAPI;
 import se.leap.bitmaskclient.providersetup.activities.LoginActivity;
 import se.leap.bitmaskclient.providersetup.models.LeapSRPSession;
 
-
 public class MainActivity extends AppCompatActivity implements EipSetupListener, Observer {
 
     public final static String TAG = MainActivity.class.getSimpleName();
@@ -96,6 +103,8 @@ public class MainActivity extends AppCompatActivity implements EipSetupListener,
     public final static String ACTION_SHOW_DIALOG_FRAGMENT = "action_show_dialog_fragment";
     public final static String ACTION_SHOW_MOTD_FRAGMENT = "action_show_motd_fragment";
 
+    private @ColorRes int actionBarTextColor = R.color.colorActionBarTitleFont;
+
     /**
      * Fragment managing the behaviors, interactions and presentation of the navigation drawer.
      */
@@ -227,6 +236,41 @@ public class MainActivity extends AppCompatActivity implements EipSetupListener,
         }
     }
 
+    public @ColorRes int getActionBarTitleColor() {
+        return actionBarTextColor;
+    }
+
+    public void setDefaultActivityBarColor() {
+        setActivityBarColor(R.color.colorPrimary, R.color.colorPrimaryDark, R.color.colorActionBarTitleFont);
+    }
+
+    public void setActivityBarColor(@ColorRes int primaryColor, @ColorRes int secondaryColor, @ColorRes int textColor) {
+        ActionBar bar = getSupportActionBar();
+        if (bar == null) {
+            return;
+        }
+        int color = ContextCompat.getColor(this, secondaryColor);
+        bar.setBackgroundDrawable(new ColorDrawable(color));
+        if (Build.VERSION.SDK_INT  >= Build.VERSION_CODES.LOLLIPOP) {
+            Window window = this.getWindow();
+            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
+            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
+            window.setStatusBarColor(ContextCompat.getColor(this, primaryColor));
+        }
+
+        if (bar.getTitle() == null) {
+            return;
+        }
+
+        if (textColor == 0) {
+            actionBarTextColor = isBrightColor(color) ? R.color.actionbar_dark_color : R.color.actionbar_light_color;
+        } else {
+            actionBarTextColor = textColor;
+        }
+
+        ViewHelper.setActionBarTextColor(bar, actionBarTextColor);
+    }
+
     @Override
     protected void onActivityResult(int requestCode, int resultCode, Intent data) {
         super.onActivityResult(requestCode, resultCode, data);
diff --git a/app/src/main/java/se/leap/bitmaskclient/base/fragments/EipFragment.java b/app/src/main/java/se/leap/bitmaskclient/base/fragments/EipFragment.java
deleted file mode 100644
index a95a14ef..00000000
--- a/app/src/main/java/se/leap/bitmaskclient/base/fragments/EipFragment.java
+++ /dev/null
@@ -1,684 +0,0 @@
-/**
- * Copyright (c) 2018 LEAP Encryption Access Project and contributers
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-package se.leap.bitmaskclient.base.fragments;
-
-import static de.blinkt.openvpn.core.ConnectionStatus.LEVEL_NONETWORK;
-import static se.leap.bitmaskclient.R.string.vpn_certificate_user_message;
-import static se.leap.bitmaskclient.base.models.Constants.ASK_TO_CANCEL_VPN;
-import static se.leap.bitmaskclient.base.models.Constants.EIP_ACTION_START;
-import static se.leap.bitmaskclient.base.models.Constants.EIP_EARLY_ROUTES;
-import static se.leap.bitmaskclient.base.models.Constants.EIP_RESTART_ON_BOOT;
-import static se.leap.bitmaskclient.base.models.Constants.PROVIDER_KEY;
-import static se.leap.bitmaskclient.base.models.Constants.REQUEST_CODE_CONFIGURE_LEAP;
-import static se.leap.bitmaskclient.base.models.Constants.REQUEST_CODE_LOG_IN;
-import static se.leap.bitmaskclient.base.models.Constants.REQUEST_CODE_SWITCH_PROVIDER;
-import static se.leap.bitmaskclient.base.models.Constants.SHARED_PREFERENCES;
-import static se.leap.bitmaskclient.base.utils.ConfigHelper.isDefaultBitmask;
-import static se.leap.bitmaskclient.base.utils.PreferenceHelper.getPreferredCity;
-import static se.leap.bitmaskclient.base.utils.ViewHelper.convertDimensionToPx;
-import static se.leap.bitmaskclient.eip.EipSetupObserver.gatewayOrder;
-import static se.leap.bitmaskclient.eip.EipSetupObserver.reconnectingWithDifferentGateway;
-import static se.leap.bitmaskclient.eip.GatewaysManager.Load.UNKNOWN;
-import static se.leap.bitmaskclient.providersetup.ProviderAPI.DOWNLOAD_GEOIP_JSON;
-import static se.leap.bitmaskclient.providersetup.ProviderAPI.UPDATE_INVALID_VPN_CERTIFICATE;
-import static se.leap.bitmaskclient.providersetup.ProviderAPI.USER_MESSAGE;
-
-import android.app.Activity;
-import android.content.ComponentName;
-import android.content.Context;
-import android.content.Intent;
-import android.content.ServiceConnection;
-import android.content.SharedPreferences;
-import android.graphics.ColorMatrix;
-import android.graphics.ColorMatrixColorFilter;
-import android.os.Bundle;
-import android.os.IBinder;
-import android.os.Vibrator;
-import android.text.Spannable;
-import android.text.SpannableString;
-import android.text.TextUtils;
-import android.text.style.RelativeSizeSpan;
-import android.util.Log;
-import android.view.Gravity;
-import android.view.LayoutInflater;
-import android.view.View;
-import android.view.ViewGroup;
-import android.widget.Toast;
-
-import androidx.annotation.NonNull;
-import androidx.appcompat.app.AlertDialog;
-import androidx.appcompat.widget.AppCompatImageView;
-import androidx.appcompat.widget.AppCompatTextView;
-import androidx.fragment.app.DialogFragment;
-import androidx.fragment.app.Fragment;
-import androidx.fragment.app.FragmentTransaction;
-
-import java.util.Observable;
-import java.util.Observer;
-import java.util.concurrent.atomic.AtomicBoolean;
-
-import butterknife.BindView;
-import butterknife.ButterKnife;
-import butterknife.OnClick;
-import butterknife.Unbinder;
-import de.blinkt.openvpn.core.ConnectionStatus;
-import de.blinkt.openvpn.core.IOpenVPNServiceInternal;
-import de.blinkt.openvpn.core.OpenVPNService;
-import de.blinkt.openvpn.core.VpnStatus;
-import de.blinkt.openvpn.core.connection.Connection;
-import se.leap.bitmaskclient.BuildConfig;
-import se.leap.bitmaskclient.R;
-import se.leap.bitmaskclient.base.FragmentManagerEnhanced;
-import se.leap.bitmaskclient.base.MainActivity;
-import se.leap.bitmaskclient.base.models.Provider;
-import se.leap.bitmaskclient.base.models.ProviderObservable;
-import se.leap.bitmaskclient.base.utils.PreferenceHelper;
-import se.leap.bitmaskclient.base.views.LocationButton;
-import se.leap.bitmaskclient.base.views.MainButton;
-import se.leap.bitmaskclient.eip.EipCommand;
-import se.leap.bitmaskclient.eip.EipStatus;
-import se.leap.bitmaskclient.eip.GatewaysManager;
-import se.leap.bitmaskclient.providersetup.ProviderAPICommand;
-import se.leap.bitmaskclient.providersetup.ProviderListActivity;
-import se.leap.bitmaskclient.providersetup.activities.CustomProviderSetupActivity;
-import se.leap.bitmaskclient.providersetup.activities.LoginActivity;
-import se.leap.bitmaskclient.providersetup.models.LeapSRPSession;
-import se.leap.bitmaskclient.tor.TorServiceCommand;
-import se.leap.bitmaskclient.tor.TorStatusObservable;
-
-public class EipFragment extends Fragment implements Observer {
-
-    public final static String TAG = EipFragment.class.getSimpleName();
-
-
-    private SharedPreferences preferences;
-    private Provider provider;
-
-    @BindView(R.id.background)
-    AppCompatImageView background;
-
-    @BindView(R.id.main_button)
-    MainButton mainButton;
-
-    @BindView(R.id.gateway_location_button)
-    LocationButton locationButton;
-
-    @BindView(R.id.main_description)
-    AppCompatTextView mainDescription;
-
-    @BindView(R.id.sub_description)
-    AppCompatTextView subDescription;
-
-    private Unbinder unbinder;
-    private EipStatus eipStatus;
-    private ProviderObservable providerObservable;
-    private TorStatusObservable torStatusObservable;
-
-    private GatewaysManager gatewaysManager;
-
-    //---saved Instance -------
-    private final String KEY_SHOW_PENDING_START_CANCELLATION = "KEY_SHOW_PENDING_START_CANCELLATION";
-    private final String KEY_SHOW_ASK_TO_STOP_EIP = "KEY_SHOW_ASK_TO_STOP_EIP";
-    private boolean showPendingStartCancellation = false;
-    private boolean showAskToStopEip = false;
-    //------------------------
-    AlertDialog alertDialog;
-
-    private IOpenVPNServiceInternal mService;
-    // We use this service connection to detect if openvpn is running without network
-    private EipFragmentServiceConnection openVpnConnection;
-
-    @Override
-    public void onAttach(Context context) {
-        super.onAttach(context);
-        Bundle arguments = getArguments();
-        Activity activity = getActivity();
-        if (activity != null) {
-            if (arguments != null) {
-                provider = arguments.getParcelable(PROVIDER_KEY);
-                if (provider == null) {
-                    handleNoProvider(activity);
-                } else {
-                    Log.d(TAG, provider.getName() + " configured as provider");
-                }
-            } else {
-                handleNoProvider(activity);
-            }
-        }
-    }
-
-    private void handleNoProvider(Activity activity) {
-        if (isDefaultBitmask()) {
-            activity.startActivityForResult(new Intent(activity, ProviderListActivity.class), REQUEST_CODE_SWITCH_PROVIDER);
-        } else {
-            Log.e(TAG, "no provider given - try to reconfigure custom provider");
-            startActivityForResult(new Intent(activity, CustomProviderSetupActivity.class), REQUEST_CODE_CONFIGURE_LEAP);
-
-        }
-
-    }
-
-    @Override
-    public void onCreate(Bundle savedInstanceState) {
-        super.onCreate(savedInstanceState);
-        openVpnConnection = new EipFragmentServiceConnection();
-        eipStatus = EipStatus.getInstance();
-        providerObservable = ProviderObservable.getInstance();
-        torStatusObservable = TorStatusObservable.getInstance();
-        Activity activity = getActivity();
-        if (activity != null) {
-            preferences = getActivity().getSharedPreferences(SHARED_PREFERENCES, Context.MODE_PRIVATE);
-        } else {
-            Log.e(TAG, "activity is null in onCreate - no preferences set!");
-        }
-
-        gatewaysManager = new GatewaysManager(getContext());
-
-
-    }
-
-    @Override
-    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
-        eipStatus.addObserver(this);
-        torStatusObservable.addObserver(this);
-        providerObservable.addObserver(this);
-        View view = inflater.inflate(R.layout.f_eip, container, false);
-        unbinder = ButterKnife.bind(this, view);
-
-        try {
-            Bundle arguments = getArguments();
-            if (arguments != null && arguments.containsKey(ASK_TO_CANCEL_VPN) && arguments.getBoolean(ASK_TO_CANCEL_VPN)) {
-                arguments.remove(ASK_TO_CANCEL_VPN);
-                setArguments(arguments);
-                askToStopEIP();
-            }
-        } catch (IllegalStateException e) {
-            // probably setArguments failed because the fragments state is already saved
-            e.printStackTrace();
-        }
-
-        restoreFromSavedInstance(savedInstanceState);
-        locationButton.setOnClickListener(v -> {
-                FragmentManagerEnhanced fragmentManager = new FragmentManagerEnhanced(getActivity().getSupportFragmentManager());
-                Fragment fragment = new GatewaySelectionFragment();
-                fragmentManager.replace(R.id.main_container, fragment, MainActivity.TAG);
-        });
-        return view;
-    }
-
-    @Override
-    public void onStart() {
-        super.onStart();
-        if (DonationReminderDialog.isCallable(getContext())) {
-            showDonationReminderDialog();
-        }
-    }
-
-    @Override
-    public void onResume() {
-        super.onResume();
-        if (!eipStatus.isDisconnected()) {
-            openVpnConnection.bindService();
-        }
-        handleNewState();
-    }
-
-    @Override
-    public void onPause() {
-        super.onPause();
-        openVpnConnection.unbindService();
-    }
-
-    @Override
-    public void onSaveInstanceState(@NonNull Bundle outState) {
-        super.onSaveInstanceState(outState);
-        if (showAskToStopEip) {
-            outState.putBoolean(KEY_SHOW_ASK_TO_STOP_EIP, true);
-            alertDialog.dismiss();
-        } else if (showPendingStartCancellation) {
-            outState.putBoolean(KEY_SHOW_PENDING_START_CANCELLATION, true);
-            alertDialog.dismiss();
-        }
-    }
-
-    private void restoreFromSavedInstance(Bundle savedInstanceState) {
-        if (savedInstanceState != null && savedInstanceState.containsKey(KEY_SHOW_PENDING_START_CANCELLATION)) {
-            showPendingStartCancellation = true;
-            askPendingStartCancellation();
-        } else if (savedInstanceState != null && savedInstanceState.containsKey(KEY_SHOW_ASK_TO_STOP_EIP)) {
-            showAskToStopEip = true;
-            askToStopEIP();
-        }
-    }
-
-    @Override
-    public void onDestroyView() {
-        super.onDestroyView();
-        eipStatus.deleteObserver(this);
-        providerObservable.deleteObserver(this);
-        torStatusObservable.deleteObserver(this);
-        unbinder.unbind();
-    }
-
-    private void saveStatus(boolean restartOnBoot) {
-        preferences.edit().putBoolean(EIP_RESTART_ON_BOOT, restartOnBoot).apply();
-    }
-
-    @OnClick(R.id.main_button)
-    void onButtonClick() {
-        handleIcon();
-    }
-
-    void handleIcon() {
-        if (isOpenVpnRunningWithoutNetwork() || eipStatus.isConnected() || eipStatus.isConnecting() || eipStatus.isUpdatingVpnCert())
-            handleSwitchOff();
-        else
-            handleSwitchOn();
-    }
-
-    private void handleSwitchOn() {
-        Context context = getContext();
-        if (context == null) {
-            Log.e(TAG, "context is null when switch turning on");
-            return;
-        }
-
-        if (canStartEIP()) {
-            startEipFromScratch();
-        } else if (canLogInToStartEIP()) {
-            askUserToLogIn(getString(vpn_certificate_user_message));
-        } else {
-            // provider has no VpnCertificate but user is logged in
-            updateInvalidVpnCertificate();
-        }
-    }
-
-    private boolean canStartEIP() {
-        boolean certificateExists = provider.hasVpnCertificate();
-        boolean isAllowedAnon = provider.allowsAnonymous();
-        return (isAllowedAnon || certificateExists) && !eipStatus.isConnected() && !eipStatus.isConnecting();
-    }
-
-    private boolean canLogInToStartEIP() {
-        boolean isAllowedRegistered = provider.allowsRegistered();
-        boolean isLoggedIn = LeapSRPSession.loggedIn();
-        return isAllowedRegistered && !isLoggedIn && !eipStatus.isConnecting() && !eipStatus.isConnected();
-    }
-
-    private void handleSwitchOff() {
-        if (isOpenVpnRunningWithoutNetwork() || eipStatus.isConnecting() || eipStatus.isUpdatingVpnCert()) {
-            askPendingStartCancellation();
-        } else if (eipStatus.isConnected()) {
-            askToStopEIP();
-        }
-    }
-
-    private void setMainButtonEnabled(boolean enabled) {
-        locationButton.setEnabled(enabled);
-        mainButton.setEnabled(enabled);
-    }
-
-    public void startEipFromScratch() {
-        saveStatus(true);
-        Context context = getContext();
-        if (context == null) {
-            Log.e(TAG, "context is null when trying to start VPN");
-            return;
-        }
-        if (!provider.getGeoipUrl().isDefault() && provider.shouldUpdateGeoIpJson()) {
-            Bundle bundle = new Bundle();
-            bundle.putBoolean(EIP_ACTION_START, true);
-            bundle.putBoolean(EIP_EARLY_ROUTES, false);
-            ProviderAPICommand.execute(context, DOWNLOAD_GEOIP_JSON, bundle, provider);
-        } else {
-            EipCommand.startVPN(context, false);
-        }
-        EipStatus.getInstance().updateState("UI_CONNECTING", "", 0, ConnectionStatus.LEVEL_START);
-    }
-
-    protected void stopEipIfPossible() {
-        Context context = getContext();
-        if (context == null) {
-            Log.e(TAG, "context is null when trying to stop EIP");
-            return;
-        }
-        EipCommand.stopVPN(context);
-    }
-
-    private void askPendingStartCancellation() {
-        Activity activity = getActivity();
-        if (activity == null) {
-            Log.e(TAG, "activity is null when asking to cancel");
-            return;
-        }
-
-        try {
-            AlertDialog.Builder alertBuilder = new AlertDialog.Builder(getActivity());
-            showPendingStartCancellation = true;
-            alertDialog = alertBuilder.setTitle(activity.getString(R.string.eip_cancel_connect_title))
-                    .setMessage(activity.getString(R.string.eip_cancel_connect_text))
-                    .setPositiveButton((android.R.string.yes), (dialog, which) -> {
-                        Context context = getContext();
-                        if (context != null && eipStatus.isUpdatingVpnCert() &&
-                                TorStatusObservable.isRunning()) {
-                            TorServiceCommand.stopTorServiceAsync(context.getApplicationContext());
-                        }
-                        stopEipIfPossible();
-                    })
-                    .setNegativeButton(activity.getString(android.R.string.no), (dialog, which) -> {
-                    }).setOnDismissListener(dialog -> showPendingStartCancellation = false).show();
-        } catch (IllegalStateException e) {
-            e.printStackTrace();
-        }
-
-    }
-
-    protected void askToStopEIP() {
-        Activity activity = getActivity();
-        if (activity == null) {
-            Log.e(TAG, "activity is null when asking to stop EIP");
-            return;
-        }
-        try {
-            AlertDialog.Builder alertBuilder = new AlertDialog.Builder(activity);
-            showAskToStopEip = true;
-            alertDialog = alertBuilder.setTitle(activity.getString(R.string.eip_cancel_connect_title))
-                    .setMessage(activity.getString(R.string.eip_warning_browser_inconsistency))
-                    .setPositiveButton((android.R.string.yes), (dialog, which) -> stopEipIfPossible())
-                    .setNegativeButton(activity.getString(android.R.string.no), (dialog, which) -> {
-                    }).setOnDismissListener(dialog -> showAskToStopEip = false).show();
-        } catch (IllegalStateException e) {
-            e.printStackTrace();
-        }
-
-    }
-
-    @Override
-    public void update(Observable observable, Object data) {
-        if (observable instanceof EipStatus) {
-            eipStatus = (EipStatus) observable;
-            handleNewStateOnMain();
-
-            if (eipStatus.isConnecting()) {
-                openVpnConnection.bindService();
-            }
-            if ("NOPROCESS".equals(EipStatus.getInstance().getState())) {
-                //assure that the Service is shutdown completely if openvpn was stopped
-                openVpnConnection.unbindService();
-            }
-        } else if (observable instanceof ProviderObservable) {
-            provider = ((ProviderObservable) observable).getCurrentProvider();
-        } else if (observable instanceof TorStatusObservable && EipStatus.getInstance().isUpdatingVpnCert()) {
-            handleNewStateOnMain();
-        }
-    }
-
-    private void handleNewStateOnMain() {
-        Activity activity = getActivity();
-        if (activity != null) {
-            activity.runOnUiThread(this::handleNewState);
-        } else {
-            Log.e("EipFragment", "activity is null");
-        }
-    }
-
-    private void handleNewState() {
-        Activity activity = getActivity();
-        if (activity == null) {
-            Log.e(TAG, "activity is null while trying to handle new state");
-            return;
-        }
-
-        Log.d(TAG, "eip fragment eipStatus state: " + eipStatus.getState() + " - level: " + eipStatus.getLevel() + " - is reconnecting: " + eipStatus.isReconnecting());
-        if (eipStatus.isUpdatingVpnCert()) {
-            setMainButtonEnabled(true);
-            showConnectionTransitionLayout(true);
-            locationButton.setText(getString(R.string.eip_status_start_pending));
-            locationButton.setLocationLoad(UNKNOWN);
-            locationButton.showBridgeIndicator(false);
-            locationButton.showRecommendedIndicator(false);
-            mainDescription.setText(null);
-            String torStatus = TorStatusObservable.getStringForCurrentStatus(getContext());
-            if (!TextUtils.isEmpty(torStatus)) {
-                Spannable spannable = new SpannableString(torStatus);
-                spannable.setSpan(new RelativeSizeSpan(0.75f), 0, spannable.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
-                subDescription.setText(TextUtils.concat(getString(R.string.updating_certificate_message) + "\n", spannable));
-            } else {
-                subDescription.setText(getString(R.string.updating_certificate_message));
-            }
-        } else if (eipStatus.isConnecting()) {
-            setMainButtonEnabled(true);
-            showConnectionTransitionLayout(true);
-            locationButton.setText(getString(R.string.eip_status_start_pending));
-            locationButton.setLocationLoad(UNKNOWN);
-            locationButton.showBridgeIndicator(false);
-            locationButton.showRecommendedIndicator(false);
-            mainDescription.setText(null);
-            subDescription.setText(null);
-        } else if (eipStatus.isConnected()) {
-            setMainButtonEnabled(true);
-            mainButton.updateState(true, false, false);
-            Connection.TransportType transportType = PreferenceHelper.getUseBridges(getContext()) ? Connection.TransportType.OBFS4 : Connection.TransportType.OPENVPN;
-            locationButton.setLocationLoad(PreferenceHelper.useObfuscationPinning(getContext()) ? GatewaysManager.Load.UNKNOWN : gatewaysManager.getLoadForLocation(VpnStatus.getLastConnectedVpnName(), transportType));
-            locationButton.setText(VpnStatus.getLastConnectedVpnName());
-            locationButton.showBridgeIndicator(VpnStatus.isUsingBridges());
-            locationButton.showRecommendedIndicator(getPreferredCity(getContext())== null);
-            mainDescription.setText(R.string.eip_state_connected);
-            subDescription.setText(null);
-            colorBackground();
-        } else if(isOpenVpnRunningWithoutNetwork()) {
-            Log.d(TAG, "eip fragment eipStatus - isOpenVpnRunningWithoutNetwork");
-            setMainButtonEnabled(true);
-            mainButton.updateState(true, false, true);
-            locationButton.setText(VpnStatus.getCurrentlyConnectingVpnName());
-            locationButton.showBridgeIndicator(VpnStatus.isUsingBridges());
-            locationButton.showBridgeIndicator(VpnStatus.isUsingBridges());
-            locationButton.showRecommendedIndicator(getPreferredCity(getContext())== null);
-            colorBackgroundALittle();
-            mainDescription.setText(R.string.eip_state_connected);
-            subDescription.setText(R.string.eip_state_no_network);
-        } else if (eipStatus.isDisconnected() && reconnectingWithDifferentGateway()) {
-            showConnectionTransitionLayout(true);
-            // showRetryToast(activity);
-            locationButton.setText(getString(R.string.eip_status_start_pending));
-            locationButton.setLocationLoad(UNKNOWN);
-            locationButton.showBridgeIndicator(false);
-            locationButton.showRecommendedIndicator(false);
-            mainDescription.setText(null);
-            subDescription.setText(R.string.reconnecting);
-        } else if (eipStatus.isDisconnecting()) {
-            setMainButtonEnabled(false);
-            showConnectionTransitionLayout(false);
-            mainDescription.setText(R.string.eip_state_insecure);
-        } else if (eipStatus.isBlocking()) {
-            setMainButtonEnabled(true);
-            mainButton.updateState(true, false, true);
-            colorBackgroundALittle();
-            locationButton.setText(getString(R.string.no_location));
-            locationButton.setLocationLoad(UNKNOWN);
-            locationButton.showBridgeIndicator(false);
-            locationButton.showRecommendedIndicator(false);
-            mainDescription.setText(R.string.eip_state_connected);
-            subDescription.setText(getString(R.string.eip_state_blocking, getString(R.string.app_name)));
-        } else {
-            locationButton.setText(activity.getString(R.string.vpn_button_turn_on));
-            setMainButtonEnabled(true);
-            mainButton.updateState(false, false, false);
-            greyscaleBackground();
-            locationButton.setLocationLoad(UNKNOWN);
-            locationButton.showBridgeIndicator(false);
-            String city = getPreferredCity(getContext());
-            locationButton.setText(city == null ? getString(R.string.gateway_selection_recommended_location) : city);
-            locationButton.showRecommendedIndicator(false);
-            mainDescription.setText(R.string.eip_state_insecure);
-            subDescription.setText(R.string.connection_not_connected);
-        }
-    }
-
-    private void showToast(Activity activity, String message, boolean vibrateLong) {
-        LayoutInflater inflater = getLayoutInflater();
-        View layout = inflater.inflate(R.layout.custom_toast,
-                activity.findViewById(R.id.custom_toast_container));
-
-        AppCompatTextView text = layout.findViewById(R.id.text);
-        text.setText(message);
-
-        Vibrator v = (Vibrator) activity.getSystemService(Context.VIBRATOR_SERVICE);
-        if (vibrateLong) {
-            v.vibrate(100);
-            v.vibrate(200);
-        } else {
-            v.vibrate(100);
-        }
-
-        Toast toast = new Toast(activity.getApplicationContext());
-        toast.setGravity(Gravity.BOTTOM, 0, convertDimensionToPx(this.getContext(), R.dimen.stdpadding));
-        toast.setDuration(Toast.LENGTH_LONG);
-        toast.setView(layout);
-        toast.show();
-    }
-
-    private void showRetryToast(Activity activity) {
-        int nClosestGateway = gatewayOrder();
-        String message = String.format("Server number " + nClosestGateway + " not reachable. Trying next gateway.");
-        showToast(activity, message, true );
-    }
-
-    private void showConnectionTransitionLayout(boolean isConnecting) {
-        mainButton.updateState(true, isConnecting, false);
-        if (isConnecting) {
-            colorBackgroundALittle();
-        } else {
-            greyscaleBackground();
-        }
-    }
-
-    private boolean isOpenVpnRunningWithoutNetwork() {
-        boolean isRunning = false;
-        try {
-            isRunning = eipStatus.getLevel() == LEVEL_NONETWORK &&
-                    mService.isVpnRunning();
-        } catch (Exception e) {
-            //eat me
-            e.printStackTrace();
-        }
-
-        return isRunning;
-    }
-
-    private void greyscaleBackground() {
-        if (BuildConfig.use_color_filter) {
-            ColorMatrix matrix = new ColorMatrix();
-            matrix.setSaturation(0);
-            ColorMatrixColorFilter cf = new ColorMatrixColorFilter(matrix);
-            background.setColorFilter(cf);
-            background.setImageAlpha(255);
-        }
-    }
-
-    private void colorBackgroundALittle() {
-        if (BuildConfig.use_color_filter) {
-            background.setColorFilter(null);
-            background.setImageAlpha(144);
-        }
-    }
-
-    private void colorBackground() {
-        if (BuildConfig.use_color_filter) {
-            background.setColorFilter(null);
-            background.setImageAlpha(210);
-        }
-    }
-
-    private void updateInvalidVpnCertificate() {
-        eipStatus.setUpdatingVpnCert(true);
-        ProviderAPICommand.execute(getContext(), UPDATE_INVALID_VPN_CERTIFICATE, provider);
-    }
-
-    private void askUserToLogIn(String userMessage) {
-        Intent intent = new Intent(getContext(), LoginActivity.class);
-        intent.putExtra(PROVIDER_KEY, provider);
-
-        if(userMessage != null) {
-            intent.putExtra(USER_MESSAGE, userMessage);
-        }
-
-        Activity activity = getActivity();
-        if (activity != null) {
-            activity.startActivityForResult(intent, REQUEST_CODE_LOG_IN);
-        }
-    }
-
-    private class EipFragmentServiceConnection implements ServiceConnection {
-        private final AtomicBoolean bind = new AtomicBoolean(false);
-
-        void bindService() {
-            Activity activity = getActivity();
-            if (activity == null) {
-                Log.e(TAG, "activity is null when binding OpenVpn");
-                return;
-            }
-            if (!bind.get()) {
-                activity.runOnUiThread(() -> {
-                        Intent intent = new Intent(activity, OpenVPNService.class);
-                        intent.setAction(OpenVPNService.START_SERVICE);
-
-                        activity.bindService(intent, EipFragmentServiceConnection.this, Context.BIND_AUTO_CREATE);
-                        bind.set(true);
-                });
-            }
-        }
-
-        void unbindService() {
-            Activity activity = getActivity();
-            if (activity == null) {
-                return;
-            }
-            if (bind.get()) {
-                activity.runOnUiThread(() -> {
-                    activity.unbindService(EipFragmentServiceConnection.this);
-                    bind.set(false);
-                });
-            }
-        }
-
-        @Override
-        public void onServiceConnected(ComponentName className,
-                                       IBinder service) {
-            mService = IOpenVPNServiceInternal.Stub.asInterface(service);
-            handleNewState();
-        }
-
-        @Override
-        public void onServiceDisconnected(ComponentName arg0) {
-            mService = null;
-        }
-    }
-
-    public void showDonationReminderDialog() {
-        try {
-            FragmentTransaction fragmentTransaction = new FragmentManagerEnhanced(
-                    getActivity().getSupportFragmentManager()).removePreviousFragment(
-                    DonationReminderDialog.TAG);
-            DialogFragment newFragment = new DonationReminderDialog();
-            newFragment.setCancelable(false);
-            newFragment.show(fragmentTransaction, DonationReminderDialog.TAG);
-        } catch (IllegalStateException | NullPointerException e) {
-            e.printStackTrace();
-        }
-    }
-}
diff --git a/app/src/main/java/se/leap/bitmaskclient/base/fragments/NavigationDrawerFragment.java b/app/src/main/java/se/leap/bitmaskclient/base/fragments/NavigationDrawerFragment.java
index cdfee7b2..fe36e00a 100644
--- a/app/src/main/java/se/leap/bitmaskclient/base/fragments/NavigationDrawerFragment.java
+++ b/app/src/main/java/se/leap/bitmaskclient/base/fragments/NavigationDrawerFragment.java
@@ -38,6 +38,9 @@ import android.content.res.Configuration;
 import android.net.Uri;
 import android.os.Bundle;
 import android.os.Handler;
+import android.text.Spannable;
+import android.text.SpannableString;
+import android.text.style.ForegroundColorSpan;
 import android.view.LayoutInflater;
 import android.view.Menu;
 import android.view.MenuInflater;
@@ -45,12 +48,15 @@ import android.view.MenuItem;
 import android.view.View;
 import android.view.ViewGroup;
 
+import androidx.annotation.ColorRes;
 import androidx.annotation.NonNull;
 import androidx.appcompat.app.ActionBar;
 import androidx.appcompat.app.ActionBarDrawerToggle;
 import androidx.appcompat.app.AlertDialog;
 import androidx.appcompat.app.AppCompatActivity;
 import androidx.appcompat.widget.Toolbar;
+import androidx.appcompat.widget.ViewUtils;
+import androidx.core.content.ContextCompat;
 import androidx.core.view.GravityCompat;
 import androidx.drawerlayout.widget.DrawerLayout;
 import androidx.fragment.app.Fragment;
@@ -64,6 +70,7 @@ import se.leap.bitmaskclient.base.FragmentManagerEnhanced;
 import se.leap.bitmaskclient.base.MainActivity;
 import se.leap.bitmaskclient.base.models.Provider;
 import se.leap.bitmaskclient.base.models.ProviderObservable;
+import se.leap.bitmaskclient.base.utils.ViewHelper;
 import se.leap.bitmaskclient.base.views.IconSwitchEntry;
 import se.leap.bitmaskclient.base.views.IconTextEntry;
 import se.leap.bitmaskclient.eip.EipStatus;
@@ -443,6 +450,12 @@ public class NavigationDrawerFragment extends Fragment implements SharedPreferen
         ActionBar actionBar = getActionBar();
         actionBar.setDisplayShowTitleEnabled(true);
         actionBar.setTitle(R.string.app_name);
+        Activity activity = getActivity();
+        if (activity == null) {
+            return;
+        }
+        @ColorRes int titleColor = ((MainActivity) activity).getActionBarTitleColor();
+        ViewHelper.setActionBarTextColor(actionBar, titleColor);
     }
 
     private ActionBar getActionBar() {
diff --git a/app/src/main/java/se/leap/bitmaskclient/base/utils/ViewHelper.java b/app/src/main/java/se/leap/bitmaskclient/base/utils/ViewHelper.java
index 7410172f..8076f99e 100644
--- a/app/src/main/java/se/leap/bitmaskclient/base/utils/ViewHelper.java
+++ b/app/src/main/java/se/leap/bitmaskclient/base/utils/ViewHelper.java
@@ -1,11 +1,18 @@
 package se.leap.bitmaskclient.base.utils;
 
+import android.app.Notification;
 import android.content.Context;
+import android.graphics.Color;
+import android.text.Spannable;
+import android.text.SpannableString;
+import android.text.style.ForegroundColorSpan;
 
+import androidx.annotation.ColorRes;
 import androidx.annotation.DimenRes;
 import androidx.annotation.StringRes;
 import androidx.appcompat.app.ActionBar;
 import androidx.appcompat.app.AppCompatActivity;
+import androidx.core.content.ContextCompat;
 import androidx.fragment.app.Fragment;
 
 /**
@@ -33,4 +40,34 @@ public class ViewHelper {
         }
     }
 
+    public static boolean isBrightColor(int color) {
+        if (android.R.color.transparent == color)
+            return true;
+
+        boolean rtnValue = false;
+
+        int[] rgb = { Color.red(color), Color.green(color), Color.blue(color) };
+
+        int brightness = (int) Math.sqrt(rgb[0] * rgb[0] * .241 + rgb[1]
+                * rgb[1] * .691 + rgb[2] * rgb[2] * .068);
+
+        // color is light
+        if (brightness >= 200) {
+            rtnValue = true;
+        }
+
+        return rtnValue;
+    }
+
+    public static void setActionBarTextColor(ActionBar bar, @ColorRes int titleColor) {
+        CharSequence titleCharSequence = bar.getTitle();
+        if (titleCharSequence == null) {
+            return;
+        }
+        String title = titleCharSequence.toString();
+        Spannable spannableTitle = new SpannableString(title);
+        spannableTitle.setSpan(new ForegroundColorSpan(ContextCompat.getColor(bar.getThemedContext(), titleColor)), 0, spannableTitle.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
+        bar.setTitle(spannableTitle);
+    }
+
 }
diff --git a/app/src/main/java/se/leap/bitmaskclient/base/views/LocationButton.java b/app/src/main/java/se/leap/bitmaskclient/base/views/LocationButton.java
index b2182d61..7ad044bd 100644
--- a/app/src/main/java/se/leap/bitmaskclient/base/views/LocationButton.java
+++ b/app/src/main/java/se/leap/bitmaskclient/base/views/LocationButton.java
@@ -3,15 +3,16 @@ package se.leap.bitmaskclient.base.views;
 import android.content.Context;
 import android.util.AttributeSet;
 import android.view.LayoutInflater;
-import android.view.View;
 import android.widget.RelativeLayout;
 
+import androidx.annotation.ColorRes;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.appcompat.widget.AppCompatImageView;
 import androidx.appcompat.widget.AppCompatTextView;
+import androidx.core.content.ContextCompat;
 
-import se.leap.bitmaskclient.R;
+import se.leap.bitmaskclient.databinding.VLocationButtonBinding;
 import se.leap.bitmaskclient.eip.GatewaysManager;
 
 public class LocationButton extends RelativeLayout {
@@ -31,13 +32,16 @@ public class LocationButton extends RelativeLayout {
     }
 
     private void initLayout(Context context) {
-        LayoutInflater inflater = (LayoutInflater) context
-                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
-        View rootview = inflater.inflate(R.layout.v_location_button, this, true);
-        locationIndicator = rootview.findViewById(R.id.load_indicator);
-        textView = rootview.findViewById(R.id.text_location);
-        bridgeView = rootview.findViewById(R.id.bridge_icn);
-        recommendedView = rootview.findViewById(R.id.recommended_icn);
+        VLocationButtonBinding binding = VLocationButtonBinding.inflate(LayoutInflater.from(context), this, true);
+        locationIndicator = binding.loadIndicator;
+        textView = binding.textLocation;
+        bridgeView = binding.bridgeIcn;
+        recommendedView = binding.recommendedIcn;
+
+    }
+
+    public void setTextColor(@ColorRes int color) {
+        textView.setTextColor(ContextCompat.getColor(getContext(), color));
     }
 
     public void setLocationLoad(GatewaysManager.Load load) {
diff --git a/app/src/main/java/se/leap/bitmaskclient/base/views/MainButton.java b/app/src/main/java/se/leap/bitmaskclient/base/views/MainButton.java
deleted file mode 100644
index c5ac4544..00000000
--- a/app/src/main/java/se/leap/bitmaskclient/base/views/MainButton.java
+++ /dev/null
@@ -1,124 +0,0 @@
-package se.leap.bitmaskclient.base.views;
-
-import android.annotation.TargetApi;
-import android.content.Context;
-import android.graphics.PorterDuff;
-import android.graphics.drawable.AnimationDrawable;
-import android.util.AttributeSet;
-import android.view.LayoutInflater;
-import android.view.View;
-import android.view.animation.AlphaAnimation;
-import android.view.animation.Animation;
-import android.widget.RelativeLayout;
-
-import androidx.annotation.ColorRes;
-import androidx.annotation.DrawableRes;
-import androidx.appcompat.widget.AppCompatImageView;
-import androidx.core.content.ContextCompat;
-
-import se.leap.bitmaskclient.R;
-
-public class MainButton extends RelativeLayout {
-
-    private static final String TAG = MainButton.class.getSimpleName();
-
-    AppCompatImageView glow;
-    AppCompatImageView shadowLight;
-    AnimationDrawable glowAnimation;
-
-    private boolean isOn = false;
-    private boolean isProcessing = false;
-    private boolean isError = true;
-
-
-    public MainButton(Context context) {
-        super(context);
-        initLayout(context);
-    }
-
-    public MainButton(Context context, AttributeSet attrs) {
-        super(context, attrs);
-        initLayout(context);
-    }
-
-    public MainButton(Context context, AttributeSet attrs, int defStyleAttr) {
-        super(context, attrs, defStyleAttr);
-        initLayout(context);
-    }
-
-
-    @TargetApi(21)
-    public MainButton(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
-        super(context, attrs, defStyleAttr, defStyleRes);
-        initLayout(context);
-    }
-
-    private void initLayout(Context context) {
-        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
-        View rootview = inflater.inflate(R.layout.v_main_btn, this, true);
-
-        glow = rootview.findViewById(R.id.vpn_btn_glow);
-        glowAnimation = (AnimationDrawable) glow.getBackground();
-        shadowLight = rootview.findViewById(R.id.vpn_btn_shadow_light);
-    }
-
-
-    private void stopGlowAnimation() {
-        AlphaAnimation fadeOutAnimation = new AlphaAnimation(1.0f, 0.0f);
-        fadeOutAnimation.setDuration(300);
-        fadeOutAnimation.setAnimationListener(new Animation.AnimationListener() {
-            @Override
-            public void onAnimationStart(Animation animation) {}
-
-            @Override
-            public void onAnimationEnd(Animation animation) {
-                glow.setVisibility(GONE);
-                glowAnimation.stop();
-            }
-
-            @Override
-            public void onAnimationRepeat(Animation animation) {}
-        });
-        glow.startAnimation(fadeOutAnimation);
-    }
-
-    private void startGlowAnimation() {
-        glow.setAlpha(1.0f);
-        glow.setVisibility(VISIBLE);
-        glowAnimation.start();
-    }
-
-    public void updateState(boolean isOn, boolean isProcessing, boolean isError) {
-        if (this.isOn != isOn) {
-            this.isOn = isOn;
-            shadowLight.setVisibility(isOn ? VISIBLE : GONE);
-        }
-
-        if (this.isProcessing != isProcessing) {
-            if (!isProcessing) {
-               stopGlowAnimation();
-            } else {
-                startGlowAnimation();
-            }
-            this.isProcessing = isProcessing;
-        }
-
-        if (this.isError != isError) {
-            @DrawableRes int drawableResource = isOn ? R.drawable.on_off_btn_start_2_enabled : R.drawable.on_off_btn_start_2_disabled;
-            if (!isError) {
-                setImageWithTint(shadowLight, drawableResource, R.color.colorMainBtnHighlight);
-            } else {
-                setImageWithTint(shadowLight, drawableResource, R.color.colorMainBtnError);
-            }
-            this.isError = isError;
-        }
-    }
-
-    private void setImageWithTint(AppCompatImageView view, @DrawableRes int resourceId, @ColorRes int color) {
-        view.setImageDrawable(ContextCompat.getDrawable(getContext(), resourceId));
-        view.setColorFilter(ContextCompat.getColor(getContext(), color), PorterDuff.Mode.SRC_ATOP);
-    }
-
-
-
-}
diff --git a/app/src/main/java/se/leap/bitmaskclient/base/views/VpnStateImage.java b/app/src/main/java/se/leap/bitmaskclient/base/views/VpnStateImage.java
deleted file mode 100644
index 2f8a4448..00000000
--- a/app/src/main/java/se/leap/bitmaskclient/base/views/VpnStateImage.java
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * Copyright (c) 2018 LEAP Encryption Access Project and contributers
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-package se.leap.bitmaskclient.base.views;
-
-import android.content.Context;
-import androidx.constraintlayout.widget.ConstraintLayout;
-import androidx.appcompat.widget.AppCompatImageView;
-import android.util.AttributeSet;
-import android.view.LayoutInflater;
-import android.view.View;
-import android.view.animation.AlphaAnimation;
-import android.view.animation.Animation;
-import android.widget.ProgressBar;
-
-import se.leap.bitmaskclient.R;
-
-/**
- * Created by cyberta on 12.02.18.
- */
-
-
-public class VpnStateImage extends ConstraintLayout {
-
-    ProgressBar progressBar;
-    AppCompatImageView stateIcon;
-
-    public VpnStateImage(Context context) {
-        super(context);
-        initLayout(context);
-    }
-
-    public VpnStateImage(Context context, AttributeSet attrs) {
-        super(context, attrs);
-        initLayout(context);
-    }
-
-    public VpnStateImage(Context context, AttributeSet attrs, int defStyleAttr) {
-        super(context, attrs, defStyleAttr);
-        initLayout(context);
-    }
-
-    void initLayout(Context context) {
-        LayoutInflater inflater = (LayoutInflater) context
-                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
-        View rootview = inflater.inflate(R.layout.v_main_button, this, true);
-        stateIcon = rootview.findViewById(R.id.vpn_state_key);
-        progressBar = rootview.findViewById(R.id.progressBar);
-        progressBar.setIndeterminate(true);
-    }
-
-    public void showProgress() {
-        progressBar.setVisibility(VISIBLE);
-    }
-
-
-    public void stopProgress(boolean animated) {
-        if (!animated) {
-            progressBar.setVisibility(GONE);
-            return;
-        }
-
-        AlphaAnimation fadeOutAnimation = new AlphaAnimation(1.0f, 0.0f);
-        fadeOutAnimation.setDuration(1000);
-        fadeOutAnimation.setAnimationListener(new Animation.AnimationListener() {
-            @Override
-            public void onAnimationStart(Animation animation) {}
-
-            @Override
-            public void onAnimationEnd(Animation animation) {
-                progressBar.setVisibility(GONE);
-            }
-
-            @Override
-            public void onAnimationRepeat(Animation animation) {}
-        });
-        
-        progressBar.startAnimation(fadeOutAnimation);
-  }
-
-    public void setStateIcon(int resource) {
-        stateIcon.setImageResource(resource);
-    }
-
-
-}
diff --git a/app/src/main/res/drawable-hdpi/bg_connected.png b/app/src/main/res/drawable-hdpi/bg_connected.png
new file mode 100644
index 00000000..0e98f705
--- /dev/null
+++ b/app/src/main/res/drawable-hdpi/bg_connected.png
diff --git a/app/src/main/res/drawable-hdpi/bg_connecting.png b/app/src/main/res/drawable-hdpi/bg_connecting.png
new file mode 100644
index 00000000..24632712
--- /dev/null
+++ b/app/src/main/res/drawable-hdpi/bg_connecting.png
diff --git a/app/src/main/res/drawable-hdpi/bg_disconnected.png b/app/src/main/res/drawable-hdpi/bg_disconnected.png
new file mode 100644
index 00000000..de96be57
--- /dev/null
+++ b/app/src/main/res/drawable-hdpi/bg_disconnected.png
diff --git a/app/src/main/res/drawable-hdpi/green_mask.png b/app/src/main/res/drawable-hdpi/green_mask.png
new file mode 100644
index 00000000..fccc060a
--- /dev/null
+++ b/app/src/main/res/drawable-hdpi/green_mask.png
diff --git a/app/src/main/res/drawable-hdpi/ic_btn_cancel.png b/app/src/main/res/drawable-hdpi/ic_btn_cancel.png
new file mode 100644
index 00000000..00feedcd
--- /dev/null
+++ b/app/src/main/res/drawable-hdpi/ic_btn_cancel.png
diff --git a/app/src/main/res/drawable-hdpi/ic_btn_on.png b/app/src/main/res/drawable-hdpi/ic_btn_on.png
new file mode 100644
index 00000000..2b37d25e
--- /dev/null
+++ b/app/src/main/res/drawable-hdpi/ic_btn_on.png
diff --git a/app/src/main/res/drawable-hdpi/red_mask.png b/app/src/main/res/drawable-hdpi/red_mask.png
new file mode 100644
index 00000000..d2ef7d99
--- /dev/null
+++ b/app/src/main/res/drawable-hdpi/red_mask.png
diff --git a/app/src/main/res/drawable-hdpi/yellow_mask.png b/app/src/main/res/drawable-hdpi/yellow_mask.png
new file mode 100644
index 00000000..72e3ae45
--- /dev/null
+++ b/app/src/main/res/drawable-hdpi/yellow_mask.png
diff --git a/app/src/main/res/drawable-xhdpi/bg_connected.png b/app/src/main/res/drawable-xhdpi/bg_connected.png
new file mode 100644
index 00000000..915dff95
--- /dev/null
+++ b/app/src/main/res/drawable-xhdpi/bg_connected.png
diff --git a/app/src/main/res/drawable-xhdpi/bg_connecting.png b/app/src/main/res/drawable-xhdpi/bg_connecting.png
new file mode 100644
index 00000000..be4469df
--- /dev/null
+++ b/app/src/main/res/drawable-xhdpi/bg_connecting.png
diff --git a/app/src/main/res/drawable-xhdpi/bg_disconnected.png b/app/src/main/res/drawable-xhdpi/bg_disconnected.png
new file mode 100644
index 00000000..433c776f
--- /dev/null
+++ b/app/src/main/res/drawable-xhdpi/bg_disconnected.png
diff --git a/app/src/main/res/drawable-xhdpi/green_mask.png b/app/src/main/res/drawable-xhdpi/green_mask.png
new file mode 100644
index 00000000..c852459d
--- /dev/null
+++ b/app/src/main/res/drawable-xhdpi/green_mask.png
diff --git a/app/src/main/res/drawable-xhdpi/ic_btn_cancel.png b/app/src/main/res/drawable-xhdpi/ic_btn_cancel.png
new file mode 100644
index 00000000..d623f8f5
--- /dev/null
+++ b/app/src/main/res/drawable-xhdpi/ic_btn_cancel.png
diff --git a/app/src/main/res/drawable-xhdpi/ic_btn_on.png b/app/src/main/res/drawable-xhdpi/ic_btn_on.png
new file mode 100644
index 00000000..4fdc9464
--- /dev/null
+++ b/app/src/main/res/drawable-xhdpi/ic_btn_on.png
diff --git a/app/src/main/res/drawable-xhdpi/red_mask.png b/app/src/main/res/drawable-xhdpi/red_mask.png
new file mode 100644
index 00000000..c0d57a03
--- /dev/null
+++ b/app/src/main/res/drawable-xhdpi/red_mask.png
diff --git a/app/src/main/res/drawable-xhdpi/yellow_mask.png b/app/src/main/res/drawable-xhdpi/yellow_mask.png
new file mode 100644
index 00000000..d81190fe
--- /dev/null
+++ b/app/src/main/res/drawable-xhdpi/yellow_mask.png
diff --git a/app/src/main/res/drawable-xxhdpi/bg_connected.png b/app/src/main/res/drawable-xxhdpi/bg_connected.png
new file mode 100644
index 00000000..cd78d865
--- /dev/null
+++ b/app/src/main/res/drawable-xxhdpi/bg_connected.png
diff --git a/app/src/main/res/drawable-xxhdpi/bg_connecting.png b/app/src/main/res/drawable-xxhdpi/bg_connecting.png
new file mode 100644
index 00000000..718e102f
--- /dev/null
+++ b/app/src/main/res/drawable-xxhdpi/bg_connecting.png
diff --git a/app/src/main/res/drawable-xxhdpi/bg_disconnected.png b/app/src/main/res/drawable-xxhdpi/bg_disconnected.png
new file mode 100644
index 00000000..ffbcdb79
--- /dev/null
+++ b/app/src/main/res/drawable-xxhdpi/bg_disconnected.png
diff --git a/app/src/main/res/drawable-xxhdpi/green_mask.png b/app/src/main/res/drawable-xxhdpi/green_mask.png
new file mode 100644
index 00000000..32286177
--- /dev/null
+++ b/app/src/main/res/drawable-xxhdpi/green_mask.png
diff --git a/app/src/main/res/drawable-xxhdpi/ic_btn_cancel.png b/app/src/main/res/drawable-xxhdpi/ic_btn_cancel.png
new file mode 100644
index 00000000..af604d9b
--- /dev/null
+++ b/app/src/main/res/drawable-xxhdpi/ic_btn_cancel.png
diff --git a/app/src/main/res/drawable-xxhdpi/ic_btn_on.png b/app/src/main/res/drawable-xxhdpi/ic_btn_on.png
new file mode 100644
index 00000000..d6cfc10b
--- /dev/null
+++ b/app/src/main/res/drawable-xxhdpi/ic_btn_on.png
diff --git a/app/src/main/res/drawable-xxhdpi/red_mask.png b/app/src/main/res/drawable-xxhdpi/red_mask.png
new file mode 100644
index 00000000..ac560317
--- /dev/null
+++ b/app/src/main/res/drawable-xxhdpi/red_mask.png
diff --git a/app/src/main/res/drawable-xxhdpi/yellow_mask.png b/app/src/main/res/drawable-xxhdpi/yellow_mask.png
new file mode 100644
index 00000000..75cf3782
--- /dev/null
+++ b/app/src/main/res/drawable-xxhdpi/yellow_mask.png
diff --git a/app/src/main/res/drawable-xxxhdpi/bg_connected.png b/app/src/main/res/drawable-xxxhdpi/bg_connected.png
new file mode 100644
index 00000000..3c9d97b4
--- /dev/null
+++ b/app/src/main/res/drawable-xxxhdpi/bg_connected.png
diff --git a/app/src/main/res/drawable-xxxhdpi/bg_connecting.png b/app/src/main/res/drawable-xxxhdpi/bg_connecting.png
new file mode 100644
index 00000000..bff2004c
--- /dev/null
+++ b/app/src/main/res/drawable-xxxhdpi/bg_connecting.png
diff --git a/app/src/main/res/drawable-xxxhdpi/bg_disconnected.png b/app/src/main/res/drawable-xxxhdpi/bg_disconnected.png
new file mode 100644
index 00000000..2503f135
--- /dev/null
+++ b/app/src/main/res/drawable-xxxhdpi/bg_disconnected.png
diff --git a/app/src/main/res/drawable-xxxhdpi/green_mask.png b/app/src/main/res/drawable-xxxhdpi/green_mask.png
new file mode 100644
index 00000000..f5a5adaf
--- /dev/null
+++ b/app/src/main/res/drawable-xxxhdpi/green_mask.png
diff --git a/app/src/main/res/drawable-xxxhdpi/ic_btn_cancel.png b/app/src/main/res/drawable-xxxhdpi/ic_btn_cancel.png
new file mode 100644
index 00000000..6c17bd78
--- /dev/null
+++ b/app/src/main/res/drawable-xxxhdpi/ic_btn_cancel.png
diff --git a/app/src/main/res/drawable-xxxhdpi/ic_btn_on.png b/app/src/main/res/drawable-xxxhdpi/ic_btn_on.png
new file mode 100644
index 00000000..b0e54b8c
--- /dev/null
+++ b/app/src/main/res/drawable-xxxhdpi/ic_btn_on.png
diff --git a/app/src/main/res/drawable-xxxhdpi/red_mask.png b/app/src/main/res/drawable-xxxhdpi/red_mask.png
new file mode 100644
index 00000000..9e216955
--- /dev/null
+++ b/app/src/main/res/drawable-xxxhdpi/red_mask.png
diff --git a/app/src/main/res/drawable-xxxhdpi/yellow_mask.png b/app/src/main/res/drawable-xxxhdpi/yellow_mask.png
new file mode 100644
index 00000000..806dcbf4
--- /dev/null
+++ b/app/src/main/res/drawable-xxxhdpi/yellow_mask.png
diff --git a/app/src/main/res/drawable/bg_connected.png b/app/src/main/res/drawable/bg_connected.png
new file mode 100644
index 00000000..6da7878d
--- /dev/null
+++ b/app/src/main/res/drawable/bg_connected.png
diff --git a/app/src/main/res/drawable/bg_connecting.png b/app/src/main/res/drawable/bg_connecting.png
new file mode 100644
index 00000000..c371f3f0
--- /dev/null
+++ b/app/src/main/res/drawable/bg_connecting.png
diff --git a/app/src/main/res/drawable/bg_disconnected.png b/app/src/main/res/drawable/bg_disconnected.png
new file mode 100644
index 00000000..de96be57
--- /dev/null
+++ b/app/src/main/res/drawable/bg_disconnected.png
diff --git a/app/src/main/res/drawable/button_circle_cancel.xml b/app/src/main/res/drawable/button_circle_cancel.xml
new file mode 100644
index 00000000..1d94abca
--- /dev/null
+++ b/app/src/main/res/drawable/button_circle_cancel.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/button_circle_cancel_pressed" android:state_pressed="true"/>
+    <item android:drawable="@drawable/button_circle_cancel_released"/>
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_circle_cancel_pressed.xml b/app/src/main/res/drawable/button_circle_cancel_pressed.xml
new file mode 100644
index 00000000..690baa0c
--- /dev/null
+++ b/app/src/main/res/drawable/button_circle_cancel_pressed.xml
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <!--  <item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/white"/>
+            <size android:width="250dp" android:height="250dp"/>
+        </shape>
+    </item> -->
+    <item
+        android:left="-23dp"
+        android:right="-23dp"
+        android:top="-8dp"
+        android:bottom="-8dp"
+        >
+        <animated-rotate
+            android:drawable="@drawable/rotate_progress_image"
+            android:pivotX="50.0%"
+            android:pivotY="50.0%"
+            android:fromDegrees="0.0"
+            android:toDegrees="360.0"
+            >
+        </animated-rotate>
+    </item>
+    <item
+        android:top="18dp"
+        android:bottom="12dp"
+        >
+        <shape android:shape="oval">
+            <solid android:color="@color/btn_cancel_dark"/>
+            <size android:width="250dp" android:height="250dp" />
+        </shape>
+    </item>
+    <item
+        android:top="18dp"
+        android:bottom="12dp"
+        >
+        <shape
+            android:shape="ring"
+            android:innerRadius="125dp"
+            android:useLevel="false"
+            android:thickness="3dp">
+            <gradient
+                android:type="radial"
+                android:gradientRadius="125dp"
+                android:centerX="0.50"
+                android:centerY="0.54"
+                android:startColor="#000000"
+                android:centerColor="#000000"
+                android:endColor="@color/transparent" />
+
+        </shape>
+    </item>
+    <item
+        android:top="68dp"
+        android:bottom="62dp"
+        android:left="50dp"
+        android:right="50dp"
+        >
+        <bitmap android:src="@drawable/ic_btn_cancel"
+            />
+    </item>
+
+
+</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_circle_cancel_released.xml b/app/src/main/res/drawable/button_circle_cancel_released.xml
new file mode 100644
index 00000000..833a9076
--- /dev/null
+++ b/app/src/main/res/drawable/button_circle_cancel_released.xml
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+   <!-- <item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/white"/>
+            <size android:width="250dp" android:height="250dp"/>
+        </shape>
+    </item>-->
+
+    <item
+        android:left="-23dp"
+        android:right="-23dp"
+        android:top="-8dp"
+        android:bottom="-8dp"
+        >
+        <animated-rotate
+            android:drawable="@drawable/rotate_progress_image"
+            android:pivotX="50.0%"
+            android:pivotY="50.0%"
+            android:fromDegrees="0.0"
+            android:toDegrees="360.0"
+            >
+        </animated-rotate>
+    </item>
+   <item
+        android:bottom="15dp"
+        android:top="15dp"
+        >
+        <shape android:shape="oval">
+           <solid android:color="@color/btn_cancel"/>
+            <size android:width="250dp" android:height="250dp" />
+        </shape>
+    </item>
+    <item
+        android:bottom="15dp"
+        android:top="15dp"
+        >
+        <shape
+            android:shape="ring"
+            android:innerRadius="125dp"
+            android:useLevel="false"
+            android:thickness="10dp">
+            <gradient
+                android:type="radial"
+                android:gradientRadius="125dp"
+                android:centerX="0.51"
+                android:centerY="0.54"
+                android:startColor="#000000"
+                android:centerColor="#000000"
+                android:endColor="@color/transparent" />
+
+        </shape>
+    </item>
+    <item
+        android:top="65dp"
+        android:bottom="65dp"
+        android:left="50dp"
+        android:right="50dp"
+        >
+        <bitmap android:src="@drawable/ic_btn_cancel" />
+    </item>
+</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_circle_start.xml b/app/src/main/res/drawable/button_circle_start.xml
new file mode 100644
index 00000000..6d8482f4
--- /dev/null
+++ b/app/src/main/res/drawable/button_circle_start.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/button_circle_start_pressed" android:state_pressed="true">
+    </item>
+    <item android:drawable="@drawable/button_circle_start_released">
+    </item>
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_circle_start_pressed.xml b/app/src/main/res/drawable/button_circle_start_pressed.xml
new file mode 100644
index 00000000..4157ffe0
--- /dev/null
+++ b/app/src/main/res/drawable/button_circle_start_pressed.xml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+   <!--<item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/white"/>
+            <size android:width="250dp" android:height="250dp"/>
+        </shape>
+    </item>-->
+    <item
+        android:top="18dp"
+        android:bottom="12dp"
+        >
+        <shape android:shape="oval">
+            <solid android:color="@color/btn_start_dark"/>
+            <size android:width="250dp" android:height="250dp" />
+        </shape>
+    </item>
+    <item
+        android:top="18dp"
+        android:bottom="12dp"
+        >
+        <shape
+            android:shape="ring"
+            android:innerRadius="125dp"
+            android:useLevel="false"
+            android:thickness="3dp">
+            <gradient
+                android:type="radial"
+                android:gradientRadius="125dp"
+                android:centerX="0.50"
+                android:centerY="0.54"
+                android:startColor="#000000"
+                android:centerColor="#000000"
+                android:endColor="@color/transparent" />
+
+        </shape>
+    </item>
+    <item
+        android:top="68dp"
+        android:bottom="62dp"
+        android:left="50dp"
+        android:right="50dp"
+        >
+        <bitmap android:src="@drawable/ic_btn_on"
+            />
+    </item>
+</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_circle_start_released.xml b/app/src/main/res/drawable/button_circle_start_released.xml
new file mode 100644
index 00000000..671d06dc
--- /dev/null
+++ b/app/src/main/res/drawable/button_circle_start_released.xml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <!--<item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/white"/>
+            <size android:width="250dp" android:height="250dp"/>
+        </shape>
+    </item>-->
+   <item
+       android:bottom="15dp"
+       android:top="15dp"
+        >
+        <shape android:shape="oval">
+           <solid android:color="@color/btn_start"/>
+            <size android:width="250dp" android:height="250dp" />
+        </shape>
+    </item>
+    <item
+        android:bottom="15dp"
+        android:top="15dp"
+        >
+        <shape
+            android:shape="ring"
+            android:innerRadius="125dp"
+            android:useLevel="false"
+            android:thickness="10dp">
+            <gradient
+                android:type="radial"
+                android:gradientRadius="125dp"
+                android:centerX="0.51"
+                android:centerY="0.54"
+                android:startColor="#000000"
+                android:centerColor="#000000"
+                android:endColor="@color/transparent" />
+
+        </shape>
+    </item>
+    <item
+        android:top="65dp"
+        android:bottom="65dp"
+        android:left="50dp"
+        android:right="50dp"
+        >
+        <bitmap android:src="@drawable/ic_btn_on" />
+    </item>
+</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_circle_stop.xml b/app/src/main/res/drawable/button_circle_stop.xml
new file mode 100644
index 00000000..674cbf15
--- /dev/null
+++ b/app/src/main/res/drawable/button_circle_stop.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/button_circle_stop_pressed" android:state_pressed="true"/>
+    <item android:drawable="@drawable/button_circle_stop_released"/>
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_circle_stop_pressed.xml b/app/src/main/res/drawable/button_circle_stop_pressed.xml
new file mode 100644
index 00000000..ce7583f1
--- /dev/null
+++ b/app/src/main/res/drawable/button_circle_stop_pressed.xml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <!--<item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/white"/>
+            <size android:width="250dp" android:height="250dp"/>
+        </shape>
+    </item>-->
+    <item
+        android:top="18dp"
+        android:bottom="12dp"
+        >
+        <shape android:shape="oval">
+            <solid android:color="@color/btn_stop_dark"/>
+            <size android:width="250dp" android:height="250dp" />
+        </shape>
+    </item>
+    <item
+        android:top="18dp"
+        android:bottom="12dp"
+        >
+        <shape
+            android:shape="ring"
+            android:innerRadius="125dp"
+            android:useLevel="false"
+            android:thickness="3dp">
+            <gradient
+                android:type="radial"
+                android:gradientRadius="125dp"
+                android:centerX="0.51"
+                android:centerY="0.54"
+                android:startColor="#000000"
+                android:centerColor="#000000"
+                android:endColor="@color/transparent" />
+
+        </shape>
+    </item>
+    <item
+        android:top="68dp"
+        android:bottom="62dp"
+        android:left="50dp"
+        android:right="50dp"
+        >
+        <bitmap android:src="@drawable/ic_btn_cancel"
+            />
+    </item>
+</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_circle_stop_released.xml b/app/src/main/res/drawable/button_circle_stop_released.xml
new file mode 100644
index 00000000..ed786ee0
--- /dev/null
+++ b/app/src/main/res/drawable/button_circle_stop_released.xml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <!--<item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/white"/>
+            <size android:width="250dp" android:height="250dp"/>
+        </shape>
+    </item>-->
+   <item
+        android:bottom="15dp"
+       android:top="15dp"
+        >
+        <shape android:shape="oval">
+           <solid android:color="@color/btn_stop"/>
+            <size android:width="250dp" android:height="250dp" />
+        </shape>
+    </item>
+    <item
+        android:bottom="15dp"
+        android:top="15dp"
+        >
+        <shape
+            android:shape="ring"
+            android:innerRadius="125dp"
+            android:useLevel="false"
+            android:thickness="10dp">
+            <gradient
+                android:type="radial"
+                android:gradientRadius="125dp"
+                android:centerX="0.51"
+                android:centerY="0.54"
+                android:startColor="#000000"
+                android:centerColor="#000000"
+                android:endColor="@color/transparent" />
+
+        </shape>
+    </item>
+    <item
+        android:top="65dp"
+        android:bottom="65dp"
+        android:left="50dp"
+        android:right="50dp"
+        >
+        <bitmap android:src="@drawable/ic_btn_cancel" />
+    </item>
+</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/cust_button_light_rect.xml b/app/src/main/res/drawable/cust_button_light_rect.xml
new file mode 100644
index 00000000..dd66c739
--- /dev/null
+++ b/app/src/main/res/drawable/cust_button_light_rect.xml
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android" >
+    <item android:state_pressed="true" >
+        <layer-list
+            android:paddingLeft="@dimen/button_bevel"
+            android:paddingRight="@dimen/button_bevel">
+            <item>
+                <shape android:shape="rectangle">
+                    <solid android:color="@color/black_transparent"/>
+                    <corners android:radius="@dimen/stdpadding"/>
+                </shape>
+            </item>
+            <item>
+                <shape android:shape="rectangle">
+                    <solid android:color="@color/btn_light_transparent_dark"/>
+                    <corners android:radius="@dimen/stdpadding"/>
+                </shape>
+            </item>
+        </layer-list>
+    </item>
+    <item android:state_focused="true">
+        <layer-list
+            android:paddingLeft="@dimen/button_bevel"
+            android:paddingRight="@dimen/button_bevel">
+            <item>
+                <shape android:shape="rectangle"  >
+                    <solid android:color="@color/black_transparent"/>
+                    <corners android:radius="@dimen/stdpadding"/>
+                </shape>
+            </item>
+            <item>
+                <shape android:shape="rectangle">
+                    <solid android:color="@color/btn_light_transparent_dark"/>
+                    <corners android:radius="@dimen/stdpadding"/>
+                </shape>
+            </item>
+
+        </layer-list>
+    </item>
+    <item >
+        <layer-list
+            android:paddingLeft="@dimen/button_bevel"
+            android:paddingRight="@dimen/button_bevel">
+            <!-- shadow -->
+            <item
+                android:top="@dimen/button_bevel"
+                android:left="1dp"
+                >
+                <shape android:shape="rectangle"  >
+                    <corners android:radius="@dimen/stdpadding" />
+                    <solid android:color="@color/black_transparent"/>
+                </shape>
+            </item>
+            <!-- fill -->
+            <item
+                android:bottom="@dimen/button_bevel"
+                android:right="1dp"
+                >
+                <shape android:shape="rectangle"  >
+                    <solid android:color="@color/btn_light_transparent"/>
+                    <corners android:radius="@dimen/stdpadding"/>
+                </shape>
+            </item>
+            <!-- gradient -->
+           <item
+                android:bottom="@dimen/button_bevel"
+                android:right="1dp"
+                >
+                <shape android:shape="rectangle">
+                    <gradient android:startColor="@color/btn_light_transparent_dark"
+                        android:endColor="@color/white_transparent"
+                        android:angle="90"
+                        />
+                    <corners android:radius="@dimen/stdpadding"/>
+                </shape>
+            </item>
+        </layer-list>
+    </item>
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/green_mask.png b/app/src/main/res/drawable/green_mask.png
new file mode 100644
index 00000000..e515f3f5
--- /dev/null
+++ b/app/src/main/res/drawable/green_mask.png
diff --git a/app/src/main/res/drawable/ic_btn_cancel.png b/app/src/main/res/drawable/ic_btn_cancel.png
new file mode 100644
index 00000000..0b55460a
--- /dev/null
+++ b/app/src/main/res/drawable/ic_btn_cancel.png
diff --git a/app/src/main/res/drawable/ic_btn_on.png b/app/src/main/res/drawable/ic_btn_on.png
new file mode 100644
index 00000000..be160a33
--- /dev/null
+++ b/app/src/main/res/drawable/ic_btn_on.png
diff --git a/app/src/main/res/drawable/red_mask.png b/app/src/main/res/drawable/red_mask.png
new file mode 100644
index 00000000..a4bd4a78
--- /dev/null
+++ b/app/src/main/res/drawable/red_mask.png
diff --git a/app/src/main/res/drawable/rotate_progress_image.xml b/app/src/main/res/drawable/rotate_progress_image.xml
new file mode 100644
index 00000000..7b539720
--- /dev/null
+++ b/app/src/main/res/drawable/rotate_progress_image.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
+    android:name="circle"
+    android:viewportWidth="91"
+    android:viewportHeight="91"
+    android:width="91dp"
+    android:height="91dp">
+
+<!--
+    // implement your rotation animation vector image here
+-->
+
+</vector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/yellow_mask.png b/app/src/main/res/drawable/yellow_mask.png
new file mode 100644
index 00000000..98dd7978
--- /dev/null
+++ b/app/src/main/res/drawable/yellow_mask.png
diff --git a/app/src/main/res/layout-port/f_eip.xml b/app/src/main/res/layout-port/f_eip.xml
deleted file mode 100644
index cb99a700..00000000
--- a/app/src/main/res/layout-port/f_eip.xml
+++ /dev/null
@@ -1,113 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:id="@+id/eipServiceFragment"
-    tools:viewBindingIgnore="true"
-    >
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/guideline_vertical_left"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:orientation="vertical"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintGuide_percent="0.225"
-        />
-
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/guideline_horizontal_bottom"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:orientation="horizontal"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintRight_toRightOf="parent"
-        app:layout_constraintGuide_percent="0.66"
-        />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/guideline_vertical_right"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:orientation="vertical"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintGuide_percent="0.775"
-        />
-
-    <androidx.appcompat.widget.AppCompatImageView
-        android:id="@+id/background"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:scaleType="fitXY"
-        app:srcCompat="@drawable/background_eip" />
-
-    <se.leap.bitmaskclient.base.views.MainButton
-        android:id="@+id/main_button"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:layout_margin="@dimen/stdpadding"
-        app:layout_constraintBottom_toTopOf="@+id/guideline_horizontal_bottom"
-        app:layout_constraintDimensionRatio="1:1"
-        app:layout_constraintEnd_toStartOf="@+id/guideline_vertical_right"
-        app:layout_constraintStart_toStartOf="@+id/guideline_vertical_left"
-        app:layout_constraintTop_toTopOf="parent"
-         />
-
-    <androidx.appcompat.widget.AppCompatTextView
-        android:id="@+id/main_description"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_constraintTop_toBottomOf="@id/main_button"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintBottom_toTopOf="@+id/sub_description"
-        android:padding="@dimen/activity_margin"
-        android:textAppearance="@android:style/TextAppearance.Large"
-        android:textSize="26sp"
-        android:textStyle="bold"
-        android:textColor="@color/colorEipFragmentFont"
-        app:layout_constraintDimensionRatio="1:1"
-        tools:text="Connection secure"
-        android:gravity="center"
-        android:maxLines="1"
-        />
-
-    <androidx.appcompat.widget.AppCompatTextView
-        android:id="@+id/sub_description"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_constraintTop_toBottomOf="@id/main_description"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintBottom_toTopOf="@+id/gateway_location_button"
-        android:padding="@dimen/activity_margin"
-        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Medium"
-        android:textStyle="bold"
-        android:textColor="@color/colorEipFragmentFont"
-        app:layout_constraintDimensionRatio="1:1"
-        tools:text="A LONG TEXT WITH SEVERAL THINGS BLABLkk \n kdjfkj \n kjdfkjdf"
-        android:gravity="center"
-        android:maxLines="3"
-        android:ellipsize="end"
-        />
-
-    <se.leap.bitmaskclient.base.views.LocationButton
-        android:id="@+id/gateway_location_button"
-        android:layout_width="match_parent"
-        android:layout_height="64dp"
-        android:layout_marginBottom="@dimen/stdpadding"
-        android:layout_marginEnd="@dimen/stdpadding"
-        android:layout_marginStart="@dimen/stdpadding"
-        android:layout_marginTop="@dimen/stdpadding"
-        android:layout_marginLeft="@dimen/stdpadding"
-        android:layout_marginRight="@dimen/stdpadding"
-        app:layout_constraintBottom_toBottomOf="@+id/background"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        tools:text="SEATTLE"
-        android:gravity="center_vertical" />
-
-</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout-xlarge-port/f_eip.xml b/app/src/main/res/layout-xlarge-port/f_eip.xml
deleted file mode 100644
index 10b7a7e3..00000000
--- a/app/src/main/res/layout-xlarge-port/f_eip.xml
+++ /dev/null
@@ -1,122 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:id="@+id/eipServiceFragment"
-    tools:viewBindingIgnore="true"
-    >
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/guideline_horizontal_top"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:orientation="horizontal"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintGuide_percent="0.0"
-        app:layout_constraintRight_toRightOf="parent" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/guideline_vertical_left"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:orientation="vertical"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintGuide_percent="0.2"
-        />
-
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/guideline_horizontal_bottom"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:orientation="horizontal"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintRight_toRightOf="parent"
-        app:layout_constraintGuide_percent="0.7"
-        />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/guideline_vertical_right"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:orientation="vertical"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintGuide_percent="0.8"
-        />
-
-    <androidx.appcompat.widget.AppCompatImageView
-        android:id="@+id/background"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:scaleType="fitXY"
-        app:srcCompat="@drawable/background_eip" />
-
-
-    <se.leap.bitmaskclient.base.views.MainButton
-        android:id="@+id/main_button"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:layout_margin="@dimen/stdpadding"
-        app:layout_constraintBottom_toTopOf="@+id/guideline_horizontal_bottom"
-        app:layout_constraintDimensionRatio="1:1"
-        app:layout_constraintEnd_toStartOf="@+id/guideline_vertical_right"
-        app:layout_constraintStart_toStartOf="@+id/guideline_vertical_left"
-        app:layout_constraintTop_toTopOf="@+id/guideline_horizontal_top"
-        app:layout_constraintVertical_bias="0.425" />
-
-    <androidx.appcompat.widget.AppCompatTextView
-        android:id="@+id/main_description"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_constraintTop_toBottomOf="@id/main_button"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintBottom_toTopOf="@+id/sub_description"
-        android:padding="@dimen/activity_margin"
-        android:textAppearance="@android:style/TextAppearance.Large"
-        android:textSize="45sp"
-        android:textStyle="bold"
-        android:textColor="@color/colorEipFragmentFont"
-        app:layout_constraintDimensionRatio="1:1"
-        tools:text="Connection Secure"
-        android:gravity="center"
-        android:maxLines="1"
-        />
-
-    <androidx.appcompat.widget.AppCompatTextView
-        android:id="@+id/sub_description"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_constraintTop_toBottomOf="@id/main_description"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintBottom_toTopOf="@+id/gateway_location_button"
-        android:padding="@dimen/activity_margin"
-        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
-        android:textStyle="bold"
-        android:textColor="@color/colorEipFragmentFont"
-        app:layout_constraintDimensionRatio="1:1"
-        tools:text="A LONG TEXT WITH SEVERAL THINGS BLABLkk"
-        android:gravity="center"
-        android:maxLines="2"
-        android:ellipsize="end"
-        />
-
-    <se.leap.bitmaskclient.base.views.LocationButton
-        android:id="@+id/gateway_location_button"
-        android:layout_width="match_parent"
-        android:layout_height="64dp"
-        android:layout_marginBottom="@dimen/stdpadding"
-        android:layout_marginEnd="@dimen/stdpadding"
-        android:layout_marginStart="@dimen/stdpadding"
-        android:layout_marginTop="@dimen/stdpadding"
-        android:layout_marginLeft="@dimen/stdpadding"
-        android:layout_marginRight="@dimen/stdpadding"
-        app:layout_constraintBottom_toBottomOf="@+id/background"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        tools:text="SEATTLE"
-        android:gravity="center_vertical" />
-</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout-xlarge/f_eip.xml b/app/src/main/res/layout-xlarge/f_eip.xml
deleted file mode 100644
index e6b28c67..00000000
--- a/app/src/main/res/layout-xlarge/f_eip.xml
+++ /dev/null
@@ -1,127 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-    This is the layout for extra large landscape, extra large portrait
-    can be found in layout-xlarge-port
--->
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:id="@+id/eipServiceFragment"
-    tools:viewBindingIgnore="true"
-    >
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/guideline_horizontal_top"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:orientation="horizontal"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintRight_toRightOf="parent"
-        app:layout_constraintGuide_percent="0.0"
-        />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/guideline_vertical_left"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:orientation="vertical"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintGuide_percent="0.2"
-        />
-
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/guideline_horizontal_bottom"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:orientation="horizontal"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintRight_toRightOf="parent"
-        app:layout_constraintGuide_percent="0.66"
-        />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/guideline_vertical_right"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:orientation="vertical"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintGuide_percent="0.8"
-        />
-
-    <androidx.appcompat.widget.AppCompatImageView
-        android:id="@+id/background"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:scaleType="fitXY"
-        app:srcCompat="@drawable/background_eip" />
-
-
-    <se.leap.bitmaskclient.base.views.MainButton
-        android:id="@+id/main_button"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:layout_margin="@dimen/stdpadding"
-        app:layout_constraintBottom_toTopOf="@+id/guideline_horizontal_bottom"
-        app:layout_constraintEnd_toStartOf="@+id/guideline_vertical_right"
-        app:layout_constraintStart_toStartOf="@+id/guideline_vertical_left"
-        app:layout_constraintTop_toTopOf="@+id/guideline_horizontal_top"
-        app:layout_constraintDimensionRatio="1:1" />
-
-    <androidx.appcompat.widget.AppCompatTextView
-        android:id="@+id/main_description"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_constraintTop_toBottomOf="@id/guideline_horizontal_bottom"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintBottom_toTopOf="@+id/sub_description"
-        android:padding="@dimen/stdpadding"
-        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
-        android:textSize="45sp"
-        android:textStyle="bold"
-        android:textColor="@color/colorEipFragmentFont"
-        app:layout_constraintDimensionRatio="1:1"
-        tools:text="CONNETION SECURE"
-        android:maxLines="1"
-        />
-
-    <androidx.appcompat.widget.AppCompatTextView
-        android:id="@+id/sub_description"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_constraintTop_toBottomOf="@id/main_description"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintBottom_toTopOf="@+id/gateway_location_button"
-        android:padding="@dimen/stdpadding"
-        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
-        android:textStyle="bold"
-        android:textColor="@color/colorEipFragmentFont"
-        app:layout_constraintDimensionRatio="1:1"
-        android:maxLines="5"
-        android:ellipsize="end"
-        tools:text="Your traffic is securly routed through"
-        android:gravity="center"
-
-        />
-
-    <se.leap.bitmaskclient.base.views.LocationButton
-        android:id="@+id/gateway_location_button"
-        android:layout_width="match_parent"
-        android:layout_height="64dp"
-        android:layout_marginBottom="@dimen/stdpadding"
-        android:layout_marginEnd="@dimen/stdpadding"
-        android:layout_marginStart="@dimen/stdpadding"
-        android:layout_marginTop="@dimen/stdpadding"
-        android:layout_marginLeft="@dimen/stdpadding"
-        android:layout_marginRight="@dimen/stdpadding"
-        app:layout_constraintBottom_toBottomOf="@+id/background"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        tools:text="SEATTLE"
-        android:gravity="center_vertical" />
-
-</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/f_eip.xml b/app/src/main/res/layout/f_eip.xml
deleted file mode 100644
index 9a823b65..00000000
--- a/app/src/main/res/layout/f_eip.xml
+++ /dev/null
@@ -1,146 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-    This is the default layout for landscape, portrait can be found
-    in layout-port
--->
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:id="@+id/eipServiceFragment"
-    tools:viewBindingIgnore="true"
-    >
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/guideline_horizontal_top"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:orientation="horizontal"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintGuide_percent="0.1"
-        app:layout_constraintRight_toRightOf="parent" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/guideline_vertical_left"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:orientation="vertical"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintGuide_percent="0.3" />
-
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/guideline_horizontal_bottom"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:orientation="horizontal"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintGuide_percent="0.55"
-        app:layout_constraintRight_toRightOf="parent" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/guideline_horizontal_button_top"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:orientation="horizontal"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintGuide_percent="0.8"
-        />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/guideline_horizontal_button_bottom"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:orientation="horizontal"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintGuide_percent="0.98"
-        app:layout_constraintRight_toRightOf="parent" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/guideline_vertical_right"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:orientation="vertical"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintGuide_percent="0.7" />
-
-    <androidx.appcompat.widget.AppCompatImageView
-        android:id="@+id/background"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:scaleType="fitXY"
-        app:srcCompat="@drawable/background_eip" />
-
-
-    <se.leap.bitmaskclient.base.views.MainButton
-        android:id="@+id/main_button"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:layout_margin="@dimen/stdpadding"
-        app:layout_constraintTop_toBottomOf="@id/guideline_horizontal_top"
-        app:layout_constraintBottom_toTopOf="@+id/guideline_horizontal_bottom"
-        app:layout_constraintEnd_toStartOf="@+id/guideline_vertical_right"
-        app:layout_constraintStart_toStartOf="@+id/guideline_vertical_left"
-        app:layout_constraintDimensionRatio="1:1"
-        />
-
-    <androidx.appcompat.widget.AppCompatTextView
-        android:id="@+id/main_description"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_constraintTop_toBottomOf="@id/guideline_horizontal_bottom"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintBottom_toTopOf="@+id/sub_description"
-        android:paddingLeft="@dimen/stdpadding"
-        android:paddingStart="@dimen/stdpadding"
-        android:paddingRight="@dimen/stdpadding"
-        android:paddingEnd="@dimen/stdpadding"
-        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
-        android:textSize="26sp"
-        android:textStyle="bold"
-        android:textColor="@color/colorEipFragmentFont"
-        app:layout_constraintDimensionRatio="1:1"
-        tools:text="Connection secure"
-        />
-
-    <androidx.appcompat.widget.AppCompatTextView
-        android:id="@+id/sub_description"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_constraintTop_toBottomOf="@id/main_description"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintBottom_toTopOf="@+id/gateway_location_button"
-        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Medium"
-        android:textStyle="bold"
-        android:textColor="@color/colorEipFragmentFont"
-        android:paddingLeft="@dimen/stdpadding"
-        android:paddingStart="@dimen/stdpadding"
-        android:paddingRight="@dimen/stdpadding"
-        android:paddingEnd="@dimen/stdpadding"
-        android:paddingBottom="@dimen/stdpadding"
-        app:layout_constraintDimensionRatio="1:1"
-        tools:text="Your traffic is securly routed through \n another"
-        android:maxLines="2"
-        android:gravity="center"
-        />
-
-    <se.leap.bitmaskclient.base.views.LocationButton
-        android:id="@+id/gateway_location_button"
-        android:layout_width="match_parent"
-        android:layout_height="0dp"
-        android:layout_marginEnd="@dimen/stdpadding"
-        android:layout_marginStart="@dimen/stdpadding"
-
-        android:layout_marginLeft="@dimen/stdpadding"
-        android:layout_marginRight="@dimen/stdpadding"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/guideline_horizontal_button_top"
-        app:layout_constraintBottom_toBottomOf="@+id/guideline_horizontal_button_bottom"
-        tools:text="SEATTLE"
-        android:gravity="center_vertical" />
-
-</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/f_test_layout.xml b/app/src/main/res/layout/f_test_layout.xml
new file mode 100644
index 00000000..6ec91259
--- /dev/null
+++ b/app/src/main/res/layout/f_test_layout.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@drawable/splash_page"
+    >
+
+</FrameLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/v_location_button.xml b/app/src/main/res/layout/v_location_button.xml
index d304d429..aa4af10c 100644
--- a/app/src/main/res/layout/v_location_button.xml
+++ b/app/src/main/res/layout/v_location_button.xml
@@ -6,9 +6,8 @@
     android:layout_width="match_parent"
     android:layout_gravity="center_vertical"
     android:padding="@dimen/stdpadding"
-    android:background="@drawable/cust_button_primary_rect"
+    android:background="@drawable/cust_button_light_rect"
     android:layout_height="match_parent"
-    tools:viewBindingIgnore="true"
     >
 
     <androidx.appcompat.widget.AppCompatImageView
@@ -39,31 +38,30 @@
         android:visibility="gone"
         tools:visibility="visible"
         />
+
     <androidx.appcompat.widget.AppCompatTextView
         android:id="@+id/text_location"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:layout_centerInParent="true"
+        android:layout_gravity="center_vertical"
+        android:layout_toStartOf="@+id/bridge_icn"
+        android:layout_toLeftOf="@+id/bridge_icn"
+        android:layout_toEndOf="@id/recommended_icn"
+        android:layout_toRightOf="@+id/recommended_icn"
+        android:ellipsize="end"
+        android:gravity="center_vertical"
+        android:maxLines="1"
         android:paddingStart="@dimen/stdpadding"
         android:paddingLeft="@dimen/stdpadding"
         android:paddingEnd="@dimen/stdpadding"
         android:paddingRight="@dimen/stdpadding"
-        android:maxLines="1"
-        android:ellipsize="end"
-        android:layout_height="match_parent"
-        android:layout_width="match_parent"
-        app:autoSizeTextType="uniform"
-        android:gravity="center_vertical"
-        app:autoSizeMinTextSize="15sp"
-        app:autoSizeMaxTextSize="24sp"
-        android:layout_toEndOf="@id/recommended_icn"
-        android:layout_toRightOf="@+id/recommended_icn"
-        android:layout_toLeftOf="@+id/bridge_icn"
-        android:layout_toStartOf="@+id/bridge_icn"
-        android:layout_gravity="center_vertical"
-        android:layout_centerInParent="true"
         android:textAppearance="@style/TextAppearance.AppCompat.Large"
         android:textStyle="bold"
-        android:textColor="@color/white"
-        tools:text="Seattle along message"
-        />
+        app:autoSizeMaxTextSize="24sp"
+        app:autoSizeMinTextSize="15sp"
+        app:autoSizeTextType="uniform"
+        tools:text="Seattle along message" />
 
     <androidx.appcompat.widget.AppCompatImageView
         android:id="@+id/bridge_icn"
diff --git a/app/src/main/res/layout/v_main_button.xml b/app/src/main/res/layout/v_main_button.xml
deleted file mode 100644
index 741fc88f..00000000
--- a/app/src/main/res/layout/v_main_button.xml
+++ /dev/null
@@ -1,136 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    xmlns:app="http://schemas.android.com/apk/res-auto">
-
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/vpn_btn_guideline_left"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="vertical"
-        app:layout_constraintGuide_percent="0.125" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/vpn_btn_guideline_right"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="vertical"
-        app:layout_constraintGuide_percent="0.875" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/vpn_btn_guideline_top"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="horizontal"
-        app:layout_constraintGuide_percent="0.125" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/vpn_btn_guideline_bottom"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="horizontal"
-        app:layout_constraintGuide_percent="0.875" />
-
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/icn_guideline_left"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="vertical"
-        app:layout_constraintGuide_percent="0.2" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/icn_guideline_right"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="vertical"
-        app:layout_constraintGuide_percent="0.8" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/icn_guideline_top"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="horizontal"
-        app:layout_constraintGuide_percent="0.2" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/icn_guideline_bottom"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="horizontal"
-        app:layout_constraintGuide_percent="0.8" />
-
-   <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/border_guideline_left"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="vertical"
-        app:layout_constraintGuide_percent="0.025" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/border_guideline_right"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="vertical"
-        app:layout_constraintGuide_percent="0.975" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/border_guideline_top"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="horizontal"
-        app:layout_constraintGuide_percent="0.025" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/border_guideline_bottom"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="horizontal"
-        app:layout_constraintGuide_percent="0.975" />
-
-
-    <ProgressBar
-        android:id="@+id/progressBar"
-        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
-
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        app:layout_constraintBottom_toBottomOf="@id/border_guideline_bottom"
-        app:layout_constraintEnd_toEndOf="@id/border_guideline_right"
-        app:layout_constraintStart_toStartOf="@id/border_guideline_left"
-        app:layout_constraintTop_toTopOf="@id/border_guideline_top"
-        app:layout_constraintDimensionRatio="1:1"
-        android:indeterminate="true"
-        android:indeterminateDuration="800"
-        android:indeterminateDrawable="@drawable/progressbar_circle"
-        android:interpolator="@android:anim/decelerate_interpolator"
-        android:indeterminateBehavior="cycle"
-        />
-
-    <androidx.appcompat.widget.AppCompatImageView
-        android:id="@+id/circle"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        app:layout_constraintBottom_toTopOf="@+id/vpn_btn_guideline_bottom"
-        app:layout_constraintEnd_toStartOf="@+id/vpn_btn_guideline_right"
-        app:layout_constraintStart_toStartOf="@+id/vpn_btn_guideline_left"
-        app:layout_constraintTop_toTopOf="@+id/vpn_btn_guideline_top"
-        app:layout_constraintDimensionRatio="1:1"
-        app:srcCompat="@drawable/black_circle" />
-
-    <androidx.appcompat.widget.AppCompatImageView
-        android:id="@+id/vpn_state_key"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        app:layout_constraintBottom_toTopOf="@+id/icn_guideline_bottom"
-        app:layout_constraintEnd_toStartOf="@+id/icn_guideline_right"
-        app:layout_constraintStart_toStartOf="@+id/icn_guideline_left"
-        app:layout_constraintTop_toTopOf="@+id/icn_guideline_top"
-        app:layout_constraintDimensionRatio="1:1"
-        app:layout_constraintVertical_bias="0.35"
-        app:srcCompat="@drawable/ic_btn_on_disabled" />
-
-</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 40b51436..c3a519cf 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -14,6 +14,7 @@
     <color name="black800_secondary">#3b3b3b</color>
     <color name="black800_transparent">#AA424242</color>
     <color name="black800_high_transparent">#22424242</color>
+    <color name="transparent">#00000000</color>
 
     <color name="red200">#ef9a9a</color>
     <color name="pink200">#f48fb1</color>
@@ -31,14 +32,12 @@
     <color name="amber200">#ffe082</color>
     <color name="orange200">#ffcc80</color>
     <color name="deepOrange200">#ffab91</color>
-
     <color name="white">#ffffff</color>
     <color name="white_transparent">#20ffffff</color>
     <color name="black_transparent">#20000000</color>
     <color name="black_high_transparent">#05000000</color>
 
-    <color name="colorActionBarTitleFont">@color/white</color>
-    <color name="colorActionBarSubtitleFont">@color/black800</color>
+
     <color name="colorEipFragmentFont">@color/black800</color>
     <color name="colorFontBtn">@color/black800</color>
     <color name="colorFontBtnEnabled">@color/white</color>
@@ -46,4 +45,30 @@
     <color name="colorLocationButtonTintTransparent">@color/black800_high_transparent</color>
     <color name="colorWarning">#B33A3A</color>
 
+    <!-- main UI on/off button colors -->
+    <color name="btn_start">#FF7D7D</color>
+    <color name="btn_start_dark">#c84c51</color>
+    <color name="btn_cancel">#FFBF00</color>
+    <color name="btn_cancel_dark">#C78F00</color>
+    <color name="btn_stop">#9FC17F</color>
+    <color name="btn_stop_dark">#709152</color>
+
+    <!-- location button background colors -->
+    <color name="btn_light_transparent">#CCFFFEFE</color>
+    <color name="btn_light_transparent_dark">#CCCCCBCB</color>
+
+    <!-- actionbar and status bar colors for different connection states -->
+    <color name="bg_disconnected_top">#EC6767</color>
+    <color name="bg_disconnected_top_light_transparent">#CCff9895</color>
+    <color name="bg_connecting_top">#FADD85</color>
+    <color name="bg_connecting_top_light_transparent">#CCffffb6</color>
+    <color name="bg_running_top">#CCDCB8</color>
+    <color name="bg_running_top_light_transparent">#ffffea</color>
+
+    <!-- action bar text colors for per state colored action bar -->
+    <color name="actionbar_dark_color">@color/black800</color>
+    <color name="actionbar_light_color">@color/white</color>
+    <!-- default action bar colors used in other fragments than EipFragment -->
+    <color name="colorActionBarTitleFont">@color/white</color>
+    <color name="colorActionBarSubtitleFont">@color/black800</color>
 </resources>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 92229e44..722f10ed 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -67,6 +67,9 @@
   <string name="authentication_failed_message">Authentication failed</string>
   <string name="registration_failed_message">Registration failed</string>
   <string name="eip_status_start_pending">Initiating connection</string>
+  <string name="eip_status_connecting">Connecting VPN</string>
+  <string name="eip_status_unsecured">Unsecured Connection</string>
+  <string name="eip_status_secured">Secured Connection</string>
   <string name="eip_cancel_connect_title">Cancel connection?</string>
   <string name="eip_cancel_connect_text">There is a connection attempt in progress.  Do you wish to cancel it?</string>
   <string name="eip.warning.browser_inconsistency">Turn off VPN connection? When the VPN is off, you may leak personal information to your Internet provider or local network.</string>