new EipFragment layout for Bitmask - portrait

9 files changed, 375 insertions, 158 deletions

diff --git a/app/src/normal/java/se.leap.bitmaskclient.base.fragments/EipFragment.java b/app/src/normal/java/se.leap.bitmaskclient.base.fragments/EipFragment.java
index 2588f436..842cb38e 100644
--- a/app/src/normal/java/se.leap.bitmaskclient.base.fragments/EipFragment.java
+++ b/app/src/normal/java/se.leap.bitmaskclient.base.fragments/EipFragment.java
@@ -63,6 +63,7 @@ import androidx.annotation.NonNull;
 import androidx.appcompat.app.AlertDialog;
 import androidx.appcompat.widget.AppCompatImageView;
 import androidx.appcompat.widget.AppCompatTextView;
+import androidx.core.content.ContextCompat;
 import androidx.fragment.app.DialogFragment;
 import androidx.fragment.app.Fragment;
 import androidx.fragment.app.FragmentTransaction;
@@ -71,10 +72,6 @@ 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;
@@ -84,13 +81,12 @@ 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.fragments.DonationReminderDialog;
-import se.leap.bitmaskclient.base.fragments.GatewaySelectionFragment;
 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.databinding.FEipBinding;
 import se.leap.bitmaskclient.eip.EipCommand;
 import se.leap.bitmaskclient.eip.EipStatus;
 import se.leap.bitmaskclient.eip.GatewaysManager;
@@ -110,22 +106,13 @@ public class EipFragment extends Fragment implements Observer {
     private SharedPreferences preferences;
     private Provider provider;
 
-    @BindView(R.id.background)
     AppCompatImageView background;
-
-    @BindView(R.id.main_button)
+    AppCompatImageView stateView;
     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;
@@ -195,11 +182,18 @@ public class EipFragment extends Fragment implements Observer {
 
     @Override
     public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
+        FEipBinding binding = FEipBinding.inflate(LayoutInflater.from(getContext()), container, false);
+        background = binding.background;
+        mainButton = binding.mainButton;
+        locationButton = binding.gatewayLocationButton;
+        locationButton.setTextColor(R.color.black800);
+        mainDescription = binding.mainDescription;
+        subDescription = binding.subDescription;
+        stateView = binding.stateView;
+
         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();
@@ -219,7 +213,11 @@ public class EipFragment extends Fragment implements Observer {
                 Fragment fragment = new GatewaySelectionFragment();
                 fragmentManager.replace(R.id.main_container, fragment, MainActivity.TAG);
         });
-        return view;
+
+        mainButton.setOnClickListener(v -> {
+            handleIcon();
+        });
+        return binding.getRoot();
     }
 
     @Override
@@ -273,18 +271,12 @@ public class EipFragment extends Fragment implements Observer {
         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();
@@ -448,12 +440,15 @@ public class EipFragment extends Fragment implements Observer {
         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));
+            String city = getPreferredCity(getContext());
+            String locationName = VpnStatus.getCurrentlyConnectingVpnName() != null ?
+                    VpnStatus.getCurrentlyConnectingVpnName() :
+                    city == null ? getString(R.string.gateway_selection_recommended_location) : city;
+            locationButton.setText(locationName);
             locationButton.setLocationLoad(UNKNOWN);
             locationButton.showBridgeIndicator(false);
             locationButton.showRecommendedIndicator(false);
-            mainDescription.setText(null);
+            mainDescription.setText(R.string.eip_status_connecting);
             String torStatus = TorStatusObservable.getStringForCurrentStatus(getContext());
             if (!TextUtils.isEmpty(torStatus)) {
                 Spannable spannable = new SpannableString(torStatus);
@@ -462,15 +457,25 @@ public class EipFragment extends Fragment implements Observer {
             } else {
                 subDescription.setText(getString(R.string.updating_certificate_message));
             }
+            background.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.bg_yellow));
+            stateView.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.yellow_mask));
+            mainButton.updateState(false, true, false);
         } else if (eipStatus.isConnecting()) {
             setMainButtonEnabled(true);
-            showConnectionTransitionLayout(true);
-            locationButton.setText(getString(R.string.eip_status_start_pending));
+            String city = getPreferredCity(getContext());
+            String locationName = VpnStatus.getCurrentlyConnectingVpnName() != null ?
+                    VpnStatus.getCurrentlyConnectingVpnName() :
+                    city == null ? getString(R.string.gateway_selection_recommended_location) : city;
+            locationButton.setText(locationName);
             locationButton.setLocationLoad(UNKNOWN);
             locationButton.showBridgeIndicator(false);
             locationButton.showRecommendedIndicator(false);
-            mainDescription.setText(null);
+            mainDescription.setText(R.string.eip_status_connecting);
             subDescription.setText(null);
+            background.setImageDrawable(ContextCompat.getDrawable(activity, R.drawable.bg_yellow));
+            stateView.setImageDrawable(ContextCompat.getDrawable(activity, R.drawable.yellow_mask));
+            mainButton.updateState(false, true, false);
+
         } else if (eipStatus.isConnected()) {
             setMainButtonEnabled(true);
             mainButton.updateState(true, false, false);
@@ -478,10 +483,11 @@ public class EipFragment extends Fragment implements Observer {
             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);
+            locationButton.showRecommendedIndicator(getPreferredCity(getContext()) == null);
+            mainDescription.setText(R.string.eip_status_secured);
             subDescription.setText(null);
-            colorBackground();
+            background.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.bg_green));
+            stateView.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.green_mask));
         } else if(isOpenVpnRunningWithoutNetwork()) {
             Log.d(TAG, "eip fragment eipStatus - isOpenVpnRunningWithoutNetwork");
             setMainButtonEnabled(true);
@@ -490,82 +496,47 @@ public class EipFragment extends Fragment implements Observer {
             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);
+            background.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.bg_yellow));
+            stateView.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.yellow_mask));
         } else if (eipStatus.isDisconnected() && reconnectingWithDifferentGateway()) {
-            showConnectionTransitionLayout(true);
-            // showRetryToast(activity);
-            locationButton.setText(getString(R.string.eip_status_start_pending));
+            locationButton.setText(VpnStatus.getCurrentlyConnectingVpnName());
             locationButton.setLocationLoad(UNKNOWN);
             locationButton.showBridgeIndicator(false);
             locationButton.showRecommendedIndicator(false);
-            mainDescription.setText(null);
+            mainDescription.setText(R.string.eip_status_connecting);
             subDescription.setText(R.string.reconnecting);
         } else if (eipStatus.isDisconnecting()) {
             setMainButtonEnabled(false);
-            showConnectionTransitionLayout(false);
-            mainDescription.setText(R.string.eip_state_insecure);
+            background.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.bg_red));
+            stateView.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.yellow_mask));
+            mainButton.updateState(false, false, false);
+            mainDescription.setText(R.string.eip_status_unsecured);
         } 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)));
+            background.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.bg_red));
+            stateView.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.red_mask));
         } else {
-            locationButton.setText(activity.getString(R.string.vpn_button_turn_on));
+            locationButton.setText(getContext().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();
+            mainDescription.setText(R.string.eip_status_unsecured);
+            subDescription.setText(null);
+            background.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.bg_red));
+            stateView.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.red_mask));
         }
     }
 
@@ -582,30 +553,6 @@ public class EipFragment extends Fragment implements Observer {
         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);
diff --git a/app/src/normal/res/color/button_tint_color.xml b/app/src/normal/res/color/button_tint_color.xml
new file mode 100644
index 00000000..f15e571d
--- /dev/null
+++ b/app/src/normal/res/color/button_tint_color.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_pressed="true"
+        android:color="@color/btn_white_transparent_dark"
+        >
+    </item>
+    <item
+        android:color="@color/btn_white_transparent" />
+</selector>
\ No newline at end of file
diff --git a/app/src/normal/res/drawable/background_red.xml b/app/src/normal/res/drawable/background_red.xml
new file mode 100644
index 00000000..0189357c
--- /dev/null
+++ b/app/src/normal/res/drawable/background_red.xml
@@ -0,0 +1,26 @@
+<?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/bg_red_1"/>
+            <size android:width="200dp" android:height="250dp" />
+        </shape>
+    </item>
+    <item
+        android:bottom="150dp"
+
+        android:top="-100dp"
+        >
+        <shape android:shape="oval">
+            <gradient
+                android:startColor="@color/bg_red_2"
+                android:endColor="@color/bg_red_3"
+                android:angle="270"
+                android:useLevel="false"
+                />
+            <size android:width="200dp" android:height="250dp" />
+        </shape>
+    </item>
+
+</layer-list>
\ No newline at end of file
diff --git a/app/src/normal/res/drawable/cust_button_primary_rect.xml b/app/src/normal/res/drawable/cust_button_primary_rect.xml
new file mode 100644
index 00000000..74ddccb0
--- /dev/null
+++ b/app/src/normal/res/drawable/cust_button_primary_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_white_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_white_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_white_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_white_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/normal/res/layout-port/f_eip.xml b/app/src/normal/res/layout-port/f_eip.xml
index cb99a700..c068df66 100644
--- a/app/src/normal/res/layout-port/f_eip.xml
+++ b/app/src/normal/res/layout-port/f_eip.xml
@@ -5,7 +5,6 @@
     android:layout_height="match_parent"
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/eipServiceFragment"
-    tools:viewBindingIgnore="true"
     >
 
     <androidx.constraintlayout.widget.Guideline
@@ -13,61 +12,79 @@
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.3"
+        />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_horizontal_center"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.175"
+        />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_vertical_outer_left"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="vertical"
         app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintGuide_percent="0.225"
+        app:layout_constraintGuide_percent="0.125"
         />
 
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_vertical_outer_right"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.875"
+        />
 
     <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"
+        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" />
+        app:srcCompat="@drawable/bg_red"
+        android:layout_marginTop="-100dp"
+        android:layout_marginRight="-100dp"
+        android:layout_marginBottom="-100dp"
+        android:layout_marginLeft="-100dp"
+        />
+
 
-    <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_constraintTop_toTopOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintBottom_toTopOf="@+id/sub_description"
         android:padding="@dimen/activity_margin"
+        android:layout_marginTop="@dimen/activity_margin"
         android:textAppearance="@android:style/TextAppearance.Large"
-        android:textSize="26sp"
         android:textStyle="bold"
+        android:textSize="34sp"
+        android:autoSizeMinTextSize="28sp"
+        android:autoSizeTextType="uniform"
         android:textColor="@color/colorEipFragmentFont"
         app:layout_constraintDimensionRatio="1:1"
         tools:text="Connection secure"
@@ -82,7 +99,6 @@
         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"
@@ -94,6 +110,29 @@
         android:ellipsize="end"
         />
 
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/state_view"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        app:layout_constraintBottom_toTopOf="@id/guideline_horizontal_bottom"
+        app:layout_constraintTop_toTopOf="@id/guideline_horizontal_center"
+        app:layout_constraintLeft_toLeftOf="@id/guideline_vertical_outer_left"
+        app:layout_constraintRight_toRightOf="@id/guideline_vertical_outer_right"
+        app:layout_constraintVertical_bias="1"
+        app:srcCompat="@drawable/red_mask"
+        />
+    <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_bottom"
+        app:layout_constraintBottom_toTopOf="@id/gateway_location_button"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintEnd_toStartOf="@+id/guideline_vertical_right"
+        app:layout_constraintStart_toStartOf="@+id/guideline_vertical_left"
+        />
+
     <se.leap.bitmaskclient.base.views.LocationButton
         android:id="@+id/gateway_location_button"
         android:layout_width="match_parent"
@@ -104,7 +143,7 @@
         android:layout_marginTop="@dimen/stdpadding"
         android:layout_marginLeft="@dimen/stdpadding"
         android:layout_marginRight="@dimen/stdpadding"
-        app:layout_constraintBottom_toBottomOf="@+id/background"
+        app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         tools:text="SEATTLE"
diff --git a/app/src/normal/res/layout-xlarge-port/f_eip.xml b/app/src/normal/res/layout-xlarge-port/f_eip.xml
index 10b7a7e3..c3d3fd36 100644
--- a/app/src/normal/res/layout-xlarge-port/f_eip.xml
+++ b/app/src/normal/res/layout-xlarge-port/f_eip.xml
@@ -5,7 +5,6 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:id="@+id/eipServiceFragment"
-    tools:viewBindingIgnore="true"
     >
 
     <androidx.constraintlayout.widget.Guideline
diff --git a/app/src/normal/res/layout-xlarge/f_eip.xml b/app/src/normal/res/layout-xlarge/f_eip.xml
index e6b28c67..4042933e 100644
--- a/app/src/normal/res/layout-xlarge/f_eip.xml
+++ b/app/src/normal/res/layout-xlarge/f_eip.xml
@@ -9,7 +9,6 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:id="@+id/eipServiceFragment"
-    tools:viewBindingIgnore="true"
     >
 
     <androidx.constraintlayout.widget.Guideline
diff --git a/app/src/normal/res/layout/f_eip.xml b/app/src/normal/res/layout/f_eip.xml
index 9a823b65..e1ea927d 100644
--- a/app/src/normal/res/layout/f_eip.xml
+++ b/app/src/normal/res/layout/f_eip.xml
@@ -9,7 +9,6 @@
     android:layout_height="match_parent"
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/eipServiceFragment"
-    tools:viewBindingIgnore="true"
     >
 
     <androidx.constraintlayout.widget.Guideline
@@ -17,16 +16,22 @@
         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_horizontal_center"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.25"
+        />
 
     <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" />
 
 
@@ -35,16 +40,13 @@
         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" />
+        app:layout_constraintGuide_percent="0.45" />
 
     <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"
         />
 
@@ -53,9 +55,8 @@
         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"
@@ -70,26 +71,15 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:scaleType="fitXY"
-        app:srcCompat="@drawable/background_eip" />
+        android:layout_margin="-100dp"
+        app:srcCompat="@drawable/bg_red" />
 
 
-    <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_constraintTop_toTopOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintBottom_toTopOf="@+id/sub_description"
@@ -112,7 +102,7 @@
         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"
+        app:layout_constraintBottom_toTopOf="@+id/guideline_horizontal_center"
         android:textAppearance="@android:style/TextAppearance.DeviceDefault.Medium"
         android:textStyle="bold"
         android:textColor="@color/colorEipFragmentFont"
@@ -127,6 +117,31 @@
         android:gravity="center"
         />
 
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/state_view"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        app:layout_constraintBottom_toTopOf="@id/guideline_horizontal_bottom"
+        app:layout_constraintTop_toBottomOf="@id/guideline_horizontal_center"
+        app:layout_constraintLeft_toLeftOf="@id/guideline_vertical_left"
+        app:layout_constraintRight_toRightOf="@id/guideline_vertical_right"
+        app:layout_constraintVertical_bias="1"
+        app:srcCompat="@drawable/red_mask"
+        />
+
+    <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_bottom"
+        app:layout_constraintBottom_toTopOf="@+id/guideline_horizontal_button_top"
+        app:layout_constraintEnd_toStartOf="@+id/guideline_vertical_right"
+        app:layout_constraintStart_toStartOf="@+id/guideline_vertical_left"
+        app:layout_constraintDimensionRatio="1:1"
+        />
+
+
     <se.leap.bitmaskclient.base.views.LocationButton
         android:id="@+id/gateway_location_button"
         android:layout_width="match_parent"
diff --git a/app/src/normal/res/layout/v_location_button.xml b/app/src/normal/res/layout/v_location_button.xml
new file mode 100644
index 00000000..e7d8a319
--- /dev/null
+++ b/app/src/normal/res/layout/v_location_button.xml
@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:orientation="horizontal"
+    android:layout_width="match_parent"
+    android:layout_gravity="center_vertical"
+    android:layout_height="match_parent"
+    android:padding="@dimen/stdpadding"
+    android:background="@drawable/cust_button_primary_rect"
+    >
+
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/world_icn"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_alignTop="@+id/text_location"
+        android:layout_alignBottom="@+id/text_location"
+        android:scaleType="fitCenter"
+        android:src="@drawable/ic_web"
+        android:layout_gravity="center"
+        app:tint="@color/colorLocationButtonTint"
+        />
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/recommended_icn"
+        android:scaleType="fitCenter"
+        android:layout_marginRight="-13dp"
+        android:layout_marginEnd="-13dp"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_alignTop="@id/text_location"
+        android:layout_alignBottom="@+id/text_location"
+        android:layout_toEndOf="@id/world_icn"
+        android:layout_toRightOf="@id/world_icn"
+        android:src="@drawable/ic_lightning_bolt"
+        app:tint="@color/colorLocationButtonTint"
+
+        android:visibility="gone"
+        tools:visibility="visible"
+        />
+    <androidx.appcompat.widget.AppCompatTextView
+        android:id="@+id/text_location"
+        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"
+        />
+
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/bridge_icn"
+
+        android:paddingStart="@dimen/compact_padding"
+        android:paddingLeft="@dimen/compact_padding"
+        android:paddingRight="@dimen/compact_padding"
+        android:paddingEnd="@dimen/compact_padding"
+        android:scaleType="fitCenter"
+        android:layout_width="48dp"
+        android:layout_height="wrap_content"
+        android:layout_alignTop="@id/text_location"
+        android:layout_alignBottom="@+id/text_location"
+        android:layout_toStartOf="@id/load_indicator"
+        android:layout_toLeftOf="@id/load_indicator"
+        android:src="@drawable/ic_bridge_36"
+        android:visibility="gone"
+        tools:visibility="visible"
+        app:tint="@color/colorLocationButtonTint"
+        />
+
+    <se.leap.bitmaskclient.base.views.LocationIndicator
+        android:id="@+id/load_indicator"
+        android:layout_marginBottom="4dp"
+        android:layout_width="48dp"
+        android:layout_height="40dp"
+        android:layout_alignParentEnd="true"
+        android:layout_alignParentRight="true"
+        android:layout_centerVertical="true"
+        android:paddingTop="@dimen/stdpadding"
+        android:paddingBottom="@dimen/stdpadding"
+        android:visibility="visible"
+        android:layout_gravity="center_vertical"
+        app:tint="@color/colorLocationButtonTintTransparent"
+        />
+
+
+
+</RelativeLayout>
\ No newline at end of file